vue-cli v3.0.1总览

[Jmingzi]

vue-cli v3.0.1总览

3.0大改版就相当于重新定义了玩法规则，这个规则可能是当下流行的，你得学习一遍适应这个规则，才能"拥抱未来"。

说到这儿，就想到了我们作为公民，也是被当作一个个粒度的个体在一定的规则下去被玩，这被叫做"韭菜"。

扯远了，让我们进入主题

1.先从vue -h查看开始，提供了

• create 3.0的方式创建项目
• add 添加cli插件
• invoke 调用cli插件
• inspect 检查webpack配置
• serve 单文件起服务
• build 单文件打包
• ui 图形化界面，依赖@vue/cli-ui
• init 2.0的方式创建项目
• config 查看~/.vuerc配置文件，也就是预置的配置和presets

cli的核心由2部分组成

• cli

  本身提供的基础功能，例如create,add,invoke,inspect,config,ui。
  ui是依赖@vue/cli-ui的，我们查看lib/ui.js发现本质是利用require('@vue/cli-ui/server')起服务

• cli-service-global

  serve和build是基于@vue/cli-service-global的，由名称我们也可以想到它是基于@vue/cli-service的，
  官方用词是"快速原型开发"，也就是你提供一个Component.vue文件就可以直接起本地服务或打包，global在这里帮你提供了template，index.html和main.js

  @vue/cli-service是本地的一个包，处理配置插件，打包起服务都是靠它，还有项目初始化的结构模版也在里面。

2.插件

从上面我们基本了解了一遍他本身核心的部分：模版，脚手架。它还有一个重要的组成部分即插件。

初始化项目时会让你选配置项，便会生成~/.vuerc，vue config就是列出~/.vuerc中的全部内容，你选择的配置项也就是插件，这种将插件保存起来的部分称为preset

官方帮你写好了几个常用插件

• cli-plugin-eslint
• cli-plugin-babel

vue add @foo/bar就是用来添加插件的，满足在项目后期有添加插件的场景

3.polyfill

说完插件还有polyfill，同样的，官方为你写好了babel-preset-app，我们可以看到在官方的推荐中，是这么写的：

presets: [
  '@vue/app'
]

这和上面插件的添加写法一致，它被解析为组名/babel-preset-包名简写，插件是被解析为组名/cli-plugin-包名简写

所以这里的preset实际是加载的@vue/babel-preset-app，它默认为你做了几件事情：

• polyfill useBuiltIns: 'usage'
• 内置了es6.array.iterator，es6.promise，es7.promise.finally

他推荐我们使用浏览器不支持的属性时手动引入core-js，有个疑问是core-js中是es.promise，在他这里为es6.promise，不知哪里做的转换。

优化最大的一个做法是，在打包的时候加上--modern属性，它会打包2份代码，一份支持es module的现代浏览器，一份就是我们现在引用polyfill的代码。他们会同时被index.html引入，通过type = module和nomodule区分，因为浏览器支持这2个属性，还支持modulepreload

4.环境变量和配置

通过vue.config.js来代替之前的config/index.js

5.与2.x的差异

1. 在倒入类似ElementUi时，babel.config.js里插件plugins选项不支持多个了，请戳babel-plugin-import

Options can't be an array in babel@7+, but you can add plugins with name to support multiple dependencies.

2. 开启eslint需要在vue.config.js里配置lintOnSave: true

3. 推荐显式地引入需要的 polyfill，具体请查看core-js modules，配置在preset下

presets: [
    [
      '@vue/app', {
        polyfills: ['es6.string.includes']
      }
    ]
  ]