vue-cli4要点总结及与vue-cli2的一些用法对比

发表于 | 分类于 ， ，

这篇文章帮助你了解vue-cli4，深入学习还是依赖于更多的实际运用。

vue-cli4，npm包名称由vue-cli改成了@vue/cli，跟babel一样，采用了scope包。

安装

1
npm install -g @vue/cli

检查：

1
2
vue --version
@vue/cli 4.1.1

功能服务

vue-cli4提供的主要功能服务有：

  • 项目脚手架
  • 快速原型开发
  • 运行时依赖
  • 官方插件集合
  • 图形化管理vue项目

现在vue-cli4的包也采用了scope包，它的源码组织结构，跟babel很相似：源代码，打开源码列表，基本可看到这些包名都是以vue-cli开头的，前面提供的五大功能服务，都是由这些单独的包来完成的。

项目脚手架

帮助你构建vue的项目。由@vue/cli这个包提供。在安装完vue-cli之后，使用vue create project-name命令来创建项目。

快速原型开发

零配置快速写vue程序。由@vue/cli和@vue/cli-service-global提供。有了它，想快速地写一个vue程序就跟写网页一样容易。现在要快速写一个vue程序，只需要写.vue文件，利用vue-cli提供的快速原型开发服务，就能让一个单独的.vue文件运行起来。使用vue serve和vue build命令，且必须在全局安装@vue/cli-service-global这个包之后，才能使用vue server和vue build命令。

运行时依赖

这是vue-cli的核心能力，它主要作用有：

  • 加载其它 CLI 插件的核心服务；
  • 一个针对绝大部分应用优化过的内部的 webpack 配置；
  • 项目内部的vue-cli-service命令，提供serve、build和inspect命令

它构建于webpack和webpack-dev-server基础之上，由@vue/cli-service这个包提供。它会被局部安装在每个项目当中，内部的vue-cli-service命令可以通过npx来执行。如：

  • npx vue-cli-service serve 用于开发环境使用
  • npx vue-cli-service build 用于生产环境构建
  • npx vue-cli-service inspect 用于检查webpack的配置

为什么会有npx vue-cli-service inspect，因为从vue-cli3开始，不再是直接通过webpack.config.js来设置webpack，而是借由vue-cli提供的服务来间接配置webpack，为了检查这种方式配置的正确性，所以需要一个命令来做校验。

其实不单是webpack，其它的在vue-cli2里面也会用到的前端工具，如babel, eslint等，现在也都是经由vue-cli提供的官方插件，进行管理。从vue-cli的角度来说，它这么做显然是为了进一步降低使用vue开发项目的难度，让开发者更关注于项目本身，而无需考虑项目构建这种前置工作任务。也正是因为这一点，从vue-cli3开始，它模仿babel推出了自己的plugins和presets。

官方插件集合

项目脚手架和运行时依赖的很多集成其它工具的工作都是由一系列新开发的vue-cli插件来完成的，vue-cli提供了官方插件，与vue-cli集成，覆盖了前端生态最好的工具集合，如：babel eslint typescript mocha jest等。同时它还提供了插件开发指南，所以自此也诞生了很多社区工具，用于扩展vue-cli的项目构建能力。

官方文档对插件功能的描述是：

插件可以修改webpack的内部配置，也可以向vue-cli-service注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。

官方插件的名字以@vue/cli-plugin-开头（同属于@vue这个scope，社区插件以vue-cli-plugin-开头。官方插件一览：

  • cli-plugin-babel
  • cli-plugin-e2e-cypress
  • cli-plugin-e2e-nightwatch
  • cli-plugin-eslint
  • cli-plugin-pwa
  • cli-plugin-router
  • cli-plugin-typescript
  • cli-plugin-unit-jest
  • cli-plugin-unit-mocha
  • cli-plugin-vuex

cli-plugin-babel帮你在项目脚手架和vue-cli-service命令中，加入babel工具的服务；cli-plugin-router帮助你在项目中集成vue-router，等等。

图形化管理vue项目

提供一个vue ui命令，会打开浏览器页面，让创建和管理vue项目，完全变为可视化的操作方式。 由@vue/cli以及@vue/cli-ui开头的包提供。

小结

从以上内容可以看出vue-cli本质上的核心能力只有两个：项目脚手架和运行时依赖。 因为快速原型开发和图形化管理项目，你完全可以不用。 而所谓的插件集合，本身就是项目脚手架和运行时依赖的核心内容。 所以学习vue-cli4，应该学运行时依赖和那些插件。

vue-cli2

如果还想使用vue-cli2提供的vue init命令，来创建项目，需全局安装一个桥接工具：

1
npm install -g @vue/cli-init

因为vue-cli4提供的vue命令，覆盖了vue-cli2提供的vue命令。安装了上面的包之后，就可以通过vue init project-name来创建符合vue-cli2模板的项目了。

不过已经不提倡这么做了，vue-cli2应该是不再更新了，我测试了这个方式，拉取到的项目模板，使用两个核心工具webpack和babel都还停留在老版本，如果要继续使用这样的模板，那就得手工自己做webpack和babel的升级。

VS. vue-cli2

总的来说，vue-cli不管是哪个版本，它都只是一个项目构建管理的工具。 vue-cli2到vue-cli4变的只是项目的构建逻辑，而怎么开发应用，也就是怎么写代码这件事情并没有变化，所以即使要对vue-cli2的项目，做vue-cli4的升级，也是一件比较清晰的任务。 这其实vue-cli4是现在这样一种使用方式的原因，说到底还是为了让使用者更关注怎么做产品，而不要耽误时间去研究如何把项目构建做得与众不同。

4与2的区别，首先体现在项目的结构上。vue-cli2曾经是这样的：

1
2
3
4
5
6
7
8
9
10
11
config/
build/
src/
static/
.eslintignore
.eslintrc.js
.editorconfig
package.json
index.html
.postcssrc.js
.gitignore

而4新建的结构，一般是这样的：

1
2
3
4
5
6
7
8
public/
src/
.browserslistrc
.editorconfig
.eslintrc.js
.gitignore
babel.config.js
package.json

2里面的index.html移动到了4的public目录，2的static目录，被4的public目录替代了。2的build目录，被移除掉了，曾经要通过build目录下的所有文件才能完成的构建配置，现在统一到vue.config.js里面来完成。2的config目录移除掉，转而用的新环境变量文件的模式来完成（.env .env.local .env.production 等）。

其它区别如下：

webpack

4里面的webpack，不能像2一样直接修改webpack.config.js了，现在统一在vue.config.js里面，通过vue-cli提供的api来修改，所以这一块的内容是有新的学习成本的。

babel

4仍然使用babel配置文件的方式来使用，但是像最常用的preset，不是直接使用@babel/preset-env，而是使用vue-cli专门提供的preset：@vue/cli-plugin-babel/preset，这个preset的使用与@babel/preset-env大同小异。

eslint

使用方式有些变化，但是一般使用4创建的项目，自动就完成了eslint的配置，所以没有新的成本。

browserslist

未变化，在项目目录下提供.browserslistrc文件做browsers配置即可。

环境变量

变化很大。2以前的项目，都是配置在config目录下，4现在采用了新的模式。所以需要学习和调整，如果2升级到4，还得花时间改原来的代码。这个工作利用查找替换，还是比较好完成的，而且不容易出错。

4新增了一个模式的概念，默认有：development production test三种。

静态资源

4新增了resource hint，做chunk文件的prefetch preload，这在2里面默认是没有的，有手动和自动添加两种方式，对于前端优化有好处，可以根据实际情况，确认是否使用。

处理静态资源的方式，跟2没啥太大变化，不管是绝对路径、相对路径，都支持；支持配置别名；支持img[src] video[src]这样一些专门跟资源地址有关的属性自动转换成有效的资源加载方式。

这个部分看下官方文档，如果从2升级到4，调整变化也不是很大。

现代模式

4新增了现代模式的构建方式，会构建出两份文件，一份在较新的浏览器里，会启用；一份在旧版浏览器里会启用；适用于较新浏览器的版本，文件大小比正常打包的小一点，也是对于vue项目体验优化的一种有力方式。

构建

4的构建命令使用起来比较简单，但与2是不同的。

4提供了构建目标的概念，vue-cli4不单是可以用于开发web app，还可以用于完成工具库开发的打包任务。这是因为vue-cli-service提供--target选项，可以用来定义要构建的目标。

小结

整体而言，vue-cli4一开始给人的认知是变化了很多东西，改啥都要通过vue-cli自身的api去改，不如以前vue-cli2那么灵活；但实际上，真正用它构建完一个项目之后，发现它比2进步了不少，我作为一个开发者，真的感受到了它想简化我们日常开发产品的那种初衷，我看着自己的项目，不用去关注以前build目录里，那么多的配置文件了，现在非常干净，日常的开发，我几乎只需要关注src目录记录即可，而且整个构建的体验，也比原来更加简洁，我只需要关心最终的构建结果是否是我想要的，不需要去考虑这个结果是怎么来的。

以上提到的与vue-cli2的区别，可能还不完善，毕竟每个人经验所致，对vue-cli2的认识也是有差异的，但是综合上面总结的那些差异来看，还是开始说的那个观点，vue-cli2能够解决的问题，vue-cli4都有相同的方式进行处理，就是这个过程的转换，需要开发者花一定的时间去学习和调整。