Vue-Cli3.x 更新填坑

      发布在:Notes, 前端技术      评论:0 条评论

Vue-Cli 3.x 更新填坑

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

创建项目

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

然后等待安装完毕就好了

重头戏 :GUI

首先看到的是项目管理
Vue-Cli3.x 更新填坑
点击进入项目,分别是插件、依赖、配置、任务
Vue-Cli3.x 更新填坑
Vue-Cli3.x 更新填坑
Vue-Cli3.x 更新填坑
Vue-Cli3.x 更新填坑

如速度统计,开发环境的代码中对比真实网络加载速度
Vue-Cli3.x 更新填坑
每一项文件的加载速度和不同网络用时,生产环境同样提供相同的统计。

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

Responses