Vue-Cli 3.x 更新填坑

Vue-Cli3.x 核心是基于 webpack4 提供服务，并提供 GUI，减少开发者配置，并且继承 Vue-cli2，PostCSS、.env 文件的模式和级联环境变量，支持 PWA、多页面模式、TypeScript 等等

• 卸载原本全局安装的 cli2 npm uninstall vue-cli -g
• 安装新版包 npm install -g @vue/cli
• 验证版本 vue -version

创建项目

vue create project-name 注意项目名不能有大写字符，如果需要两个单词则用-分开 然后会询问选取 preset ，分别是 default 和 Manually select features，default 仅包含 Babel + ESLint，而选择 Manually select features 则出现下面的界面供选择 上下切换每一项，然后按空格表示选择 所有选择完直接回车就安装了 然后一路 y 下来 值得一提的是，在 Vue-cli3.x 会询问 router 是否使用 history 模式，这无疑也降低了开发者的学习成本 另外还询问是否把当前配置存储下来，这边看个人选择 是否使用淘宝镜像源，网慢的小伙伴值得尝试

然后等待安装完毕就好了

重头戏 ：GUI

• 打开 GUI 页面 vue ui 打开 http://localhost:8000

首先看到的是项目管理 点击进入项目，分别是插件、依赖、配置、任务

• 插件 现在 你可以直接使用 GUI 来添加插件了，初步估计了一下，目前 cli 可以直接安装的插件有 222 种，涵盖视觉组件如 iview、element，自动化测试组件等等 可以直接点击安装

• 依赖 这里是对 package.json 做了可视化 运行依赖对应 dependencies 开发依赖对应 devDependencies

• 配置 这里提供一些以前需要在 json 里写的配置的 GUI，比如 vue 的基础 url、打包出来的文件夹、静态资源文件夹设置等等

• 任务 这部分的更新是让我最耳目一新的，以前依靠npm run dev和npm run build跑得任务可以到这里来跑了，并且提供更详细的数据

如速度统计，开发环境的代码中对比真实网络加载速度 每一项文件的加载速度和不同网络用时，生产环境同样提供相同的统计。

总体来说 Vue-cli3.x 的更新可以说是让人感到惊艳的，并且提供的一些新特性也把这个 cli 盘活超越了国内开发好几年 就像 PWA 目前在用这项技术的巨头能用两只手数过来 但是却成为了 cli3.x 的主要插件，可见 Vue 未来对标 app 的势头，最近也听说尤大大在重写 Vue3 ，响应机制使用 proxy 重写，性能翻倍，核心尺寸减半等等，一起期待吧（手动狗头）