首先确认自己安装的vue-cli是3.0版本的,验证方法为:win+r,输入cmd调出控制台,然后输入vue -V(大写的V):
![5d89adf91f5e4840ab112edafbf6b997.png](https://i-blog.csdnimg.cn/blog_migrate/6a0b259a0a37f6186bf96d830ccecf27.jpeg)
如果不是3.0以上的,可以进行升级,升级方法见:升级方法
vue3.0比2.0简单了一些,不用再装webpack了,创建命令:
vue create [projectname]
projectname为要创建的工程名,比如叫hello-world。
![92ca0a3173eb28677182df8e6cc1b0af.png](https://i-blog.csdnimg.cn/blog_migrate/94e1207acc482f253d51f65ce56743b5.jpeg)
有两个选项:
default (babel, eslint) 默认配置,提供babel和eslint支持Manually select features 自定义选择需要的功能,提供更多的特性选择。
![6c858e9a065c9ee5cd786985ef56d453.png](https://i-blog.csdnimg.cn/blog_migrate/f1319b70265774699f00a1c3b48c768c.jpeg)
用方向键控制,选择Manually select features (手动选择功能)
![0655a7825de08e03359ecee192508e51.png](https://i-blog.csdnimg.cn/blog_migrate/408997191134f122b08c60ccba677adb.jpeg)
按上下键切换选项,按空格键勾选和取消,按a全选,按i反选。
Babel:指转移成浏览器识别的语言,可以让你的项目支持更新的语法。TypeScript 支持使用 TypeScript 编写程序Progressive Web App (PWA) Support PWA 支持,一般PC端是用不到。Router 支持 vue-router 。Vuex 支持 vuex 。CSS Pre-processors 支持 CSS 预处理器。Linter / Formatter 支持代码风格检查和格式化。Unit Testing 支持单元测试。E2E Testing 支持 E2E 测试。
根据自己的情况进行选择,完成后按回车下一步:
![129ade14b15cabf96383906d3e090d37.png](https://i-blog.csdnimg.cn/blog_migrate/5755c838a268265b586234932dd809b5.jpeg)
Use history mode for router?*******history模式 这个看项目需要,history模式需后端支持,自行考虑。我们输入Y同意,然后选择CSS预处理语言,我选择less:
![96bfa08ba6795e12a044597f32af5d36.png](https://i-blog.csdnimg.cn/blog_migrate/f6bc9c3b55f49d9cc1f294585a1eb519.jpeg)
接着选择ESLint的代码规范,此处使用Standard代码规范,我选择了ESLint+Standardconfig(正常提交)
ESLint with error prevention only 只进行报错提醒ESLint + Airbnb config 不严谨模式ESLint + Standard config 正常模式ESLint + Prettier 严格模式
![9c65f14621f353539b1e7482665b680d.png](https://i-blog.csdnimg.cn/blog_migrate/715b4a4ca5a8e2e7a16e668631553a4b.jpeg)
回车后,选择代码检查方式:
Lint on save 保存时执行Lint and fix on commit 整理并固定提交时
![f7a94913ec2542a6a9d7f9a8de39f2a0.png](https://i-blog.csdnimg.cn/blog_migrate/a30a1ba7781e6bc15fc75db978f11429.jpeg)
我选择保存时执行,按回车继续,此时选择单元测试解决方案,我选择Jest:
![c14c8b9d5fe73292f584574eb5892093.png](https://i-blog.csdnimg.cn/blog_migrate/9a99c87bfdc0ff59daa33d837524454d.jpeg)
接着,我们选择Babel、PostCSS、ESLint等文件存放位置,第一个是保存配置文件里,第二个是保存到package.json里,我选择第一个:
![98a5ba906fb1e702a70d2aebe2c2a8ca.png](https://i-blog.csdnimg.cn/blog_migrate/847b8afe6d119d923a4208f426d7275c.jpeg)
回车后,提示是否保存配置,供以后项目使用,选择N。下次建立项目时另外配置。
![6aa2f19e443a875a44002c0157088583.png](https://i-blog.csdnimg.cn/blog_migrate/95288f9dbe4f7b2c46460bdb06ccdfe9.jpeg)
然后选择依赖安装方式,我选择的是npm方式:
![f5517642c904752d1fe610c65f34d0cb.png](https://i-blog.csdnimg.cn/blog_migrate/ce3dbe10bbbda951940aeb384f136539.jpeg)
然后就是等待创建完成了。