首先
在命令提示符里面查看vue版本号是否是大于3.0,
命令 vue -V
![](https://img.haomeiwen.com/i16281049/488f8887473856f4.png)
如果版本低于3.0 需要将脚手架用下面命令卸了重装
npm uninstall -g vue-cli
npm install -g @vue/cli
或者
yarn global remove vue-cli
yarn global add @vue/cli
注:我的版本就是3.x的,就不展示卸载重装了
新建项目
1、命令 vue ui 打开图形化界面创建项目
![](https://img.haomeiwen.com/i16281049/51b97a28e7b2d250.png)
![](https://img.haomeiwen.com/i16281049/97b55690b1748410.png)
![](https://img.haomeiwen.com/i16281049/3ce0ee90fbe7f3ff.png)
这里选择放在哪个目录下面,一般选自己的工作空间
![](https://img.haomeiwen.com/i16281049/7638e46d4d8d8b3f.png)
![](https://img.haomeiwen.com/i16281049/38727033b4c43ae6.png)
新手可以选择默认
我一般会自己选择配置
![](https://img.haomeiwen.com/i16281049/c0ae89d4c7b51626.png)
对于每一项的功能,此处做个简单描述:
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
这一步按照自己的需求选择
![image.png](https://img.haomeiwen.com/i16281049/07d4e131e6a6326c.png?
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://img.haomeiwen.com/i16281049/06fc3db1b9c0f49e.png)
写不写都无所谓,下一步之后,就等待项目安装。
安装成功后,项目结构
![](https://img.haomeiwen.com/i16281049/2241f172cd107033.png)
然后运行项目
![](https://img.haomeiwen.com/i16281049/11271cc47eef0709.png)
![](https://img.haomeiwen.com/i16281049/bfa2be463f0705fe.png)
网友评论