多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[TOC] >[success] # vue-ui 创建cli3.0项目 **vue ui** 是 **vue-cli** 提供的 **可视化的项目管理工具** ,在 **cmd** 上执行指令: ~~~ vue ui ~~~ <br> ![](https://box.kancloud.cn/145746b8f6e860b6e42c66ef0e41109d_448x351.png) 总共有三个选项: 1. 规列出所有的vue项目 2. 创建项目 3. 导入项目 >[success] ## 创建项目 第一步: ![](https://box.kancloud.cn/5ab23b1649774e51516696574e0fb260_410x647.png) 第二步: ![](https://box.kancloud.cn/b5efaecb9a802b3b4ff50d50711e85a6_784x438.png) 第三步: 这里介绍一下这些插件的作用: 1.**Babel** (Babel会将ES6、7、8、9会给转换成ES3、ES5给这些低级浏览器支持的js代码) 2.**TypeScript** (js的强类型) 3.**Progressive Web App (PWA) Support** (PWA移动应用) 4.**Router** (vue-router路由) 5.**Vuex** (vue官方的状态管理工具) 6.**CSS Pre-processors** (css预处理器) 7.**Linter / Formatter** (ESlint可以做一些代码检测,可以固定书写风格,或者在写代码时候矫正低级错误) 8.**Unit Testing** (单元测试) ![](https://box.kancloud.cn/5557bb27dffecf77fb53542d31b7f22b_1140x814.png) 第四步: 这里的介绍一下: 1. 是否需要路由的 **history(历史)模式** 2. 选择习惯的 **css预处理器** 这里选择的是 **node-sass** ![](https://box.kancloud.cn/d62b3e4b3892278c630e50c9e4701fea_300x128.png) 3. 选择 **ESlint** 的书写风格,这里选择的是 **ESLint + Standard config** 4. 最后的两项是 a. 每次保存都检查一下代码是否错误 b. 每次提交代码时候检查一下代码是否错误 ![](https://box.kancloud.cn/c5c8ae39fdbf650dd338e5afdc6c9b6a_1192x448.png) 第五步: 这里的意思就是是否将你这次手动配置的配置单保存下来,下次创建项目时候可以直接使用这次的配置项创建一个新的项目 ![](https://box.kancloud.cn/2d7b58b4cc0645a7e8c8ae49f59f4227_704x286.png) 这个时候你就可以看到你的cmd在自动执行npm install 了。