环境安装
npm安装:
1.安装最新版nodejs
2.win+R cmd
输入node -v,我这里安装的是v14.17.0
cnpm安装:
3.安装淘宝镜像npm install -g cnpm registry=https://registry.npm.taobao.org
Vue安装:
4.继续安装vue脚手架cnpm i -g @vue/cli(删除之前老的脚手架工具 npm uninstall vue-cli -g )
5.安装完成后vue -V 回车验证
只要是v4.5+版本的脚手架就可以搭建vue3.0的项目了
进入正题:开始创建vue3.0项目!
1.创建项目 vue create projectname
项目名称要避开特殊名字如echarts、vue等,接下来就是配置选择,具体如下:
- Please pick a preset
eslint):默认预设配置,会快速创建一个Vue3.0项目,提供了babel和eslint支持 Default ([Vue 2]
babel, eslint):默认预设配置,会快速创建一个Vue2.0项目,提供了babel和eslint支持 Manually
select features:手动配置项目,可根据项目的需要选择合适的选项,具备更多的选择性
- Check the features needed for your project
根据自己的需求添加配置项
Babel:使用Babel将源码进行转码(把ES6=>ES5)
TypeScript:使用TypeScript进行源码编写。使用TypeScript可以编写强类型JavaScript
Progressive Web App (PWA) Support:使用渐进式Web应用程序 Router:使用Vue路由
Vuex:使用Vuex状态管理器 CSS Pre-processors:CSS 预处理器(如:less、sass) Linter /
Formatter:使用代码风格检查和格式化(如:ESlint) Unit Testing:使用单元测试(unit tests) E2E
Testing:使用E2E(end to end)黑盒测试
- Choose a version of Vue.js that you want to start the project with
选择项目版本 - Use class-style component syntax
是否使⽤Class(类)风格装饰器, 即通过export default class Home extends Vue{} 创建Vue实例 - Pick a CSS pre-processor
选择⼀种css 预处理器, 在这⾥我选择less - Where do you prefer placing config for Babel, ESLint, etc.?
选择配置文件保存在哪里,选package.json文件里或者新建有个vue.config.js文件 - Save this as a preset for future projects?
是否将这次的配置设置为之后项目的预设模式
PS:
总结:
可能遇到的问题:
Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。
vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。
开发者一般不需要再去知道 weboack 做了什么,所以没有暴露 webpack 的配置文件,但你依然可以创建 vue.config.js 去修改默认的 webpack。