vue的作者说过，vue-cli的本质是模
版的拉取，太多的配置导致了模版的难以维护，所以重构后的版本提供了插件的功能，一个插件对应一个功能，这样避免了多个模版，也使得cli维护性得到提高，这也是本篇文章的核心介绍内容。
我对cli3的理解是，一方面扩展了cli2的核心能力 ，一方面封装了webpack逻辑和配置。在过去要去做一个cli，通常需要阅读cli2的代码，cli2的核心模块分别是 generator,prompts,template，git-repo,并用同样的方法去做一个cli，这样其实成本不小，cli3的插件就是提供了这样一种能力，你用他的规则，去做一个npm包，并发到仓库，就可以获得这种能力。
首先，先介绍一下vue-cli3，他的发布带了哪些新功能呢？我总结一下，大概有以下5点：
1.功能丰富。这点相信大家都很好理解，他实在太好用了，模版里包含了大多数业界比较新的功能，可以一键集成typescripts等类型定义工具, eslint/tslint等语法检验工具，风格规范，prettier，husky等格式化工具，还有postcss、pwa、vue-cli-server等等。
2.提高封装性和扩展性。这点指的是vue-cli-server，在过去webpack的逻辑和配置在项目里独立维护，各个项目之间就像孤岛，vue-cli-server就像一个纽带，连接起了各个项目，为项目升级webpack提供便利性，并且通过一份配置，提供个性化配置。
这里顺带扯一下vue.config.js, 这个东西就是用来个性化配置webpack的，他提供了很多的配置项，具体可以看官方文档：
https://cli.vuejs.org/zh/config/
我们挑几个常用的来讲：
configureWebpack，这个几乎是用的比较多的，简单的方法，可以通过配置的方式配置，如下所示：
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}复制代码这份配置，最终会被合并到原来的配置里，不会覆盖。
复杂的方法，可以往这个字段传一个函数，如下所示：
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}复制代码这样就可以在一个函数里做一些简单的逻辑，config是webpack config，你可以直接修改config对象，也可以返回一个对象，这个对象最终也会被合并会webpack对象。
第三种方式，是通过webpack-chain来链式调用，代码如下所示：
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}复制代码3.提供图形化管理界面，最所周知，gui易懂，cli高效，vue在降低学习门槛这方面，已经是非常好了。
通过vue ui指令，可以查看编译各个模块的情况，模块依赖情况，插件的情况，非常便于管理。
4.便捷性。vue-cli-server不仅支持项目的编译，也支持单文件的编译，具体的方法可以看官网介绍。
5.提供了cli的核心能力，也就是问询，模版渲染，文件生成这几大核心功能。具体的示意图可以看如下：
以上是cli2的核心模块，需要引用hbs,inquirer.js,metalsmit等基本模块，cli3的插件机制基本帮我们封装好了，我们只需要根据插件的规范，就可以获取这种能力。
由于有的读者可能对cli2的流程比较陌生，所以我想简单描述一下cli2的工作流程，如下图所示：
首先，cli2提供init指令，执行这个指令，会去远程拿模版文件，并拉到本地用户目录的.vue-template的文件夹，然后通过meta里问题，去问你，然后生成最终模版到你执行命令的目录。
说完vue-cli2，我们来看看vue-cli3的插件是怎么样的？
首先根据插件的位置，我们分成了cli插件，和service插件。cli的插件有完整的开发目录，所能做的事情也比较多一点，service插件是一份js文件，导出一个函数。
cli插件的目录如下所示：
具体的用发可以在官网了解到：
https://cli.vuejs.org/zh/dev-guide/plugin-dev.html#cli-%E6%8F%92%E4%BB%B6
那么他们是怎么工作的呢？
cli的代码主要在@vue/cli 下面，他的大概的流程如下图所示：
@vue/cli/bin/vue.js:
program
.command('add [pluginOptions]' )
.description('install a plugin and invoke its generator in an already created project')
.option('--registry ' , 'Use specified npm registry when installing dependencies (only for npm)')
.allowUnknownOption()
.action((plugin) => {
require('../lib/add')(plugin, minimist(process.argv.slice(3)))
})
program
.command('invoke [pluginOptions]' )
.description('invoke the generator of a plugin in an already created project')
.option('--registry ' , 'Use specified npm registry when installing dependencies (only for npm)')
.allowUnknownOption()
.action((plugin) => {
require('../lib/invoke')(plugin, minimist(process.argv.slice(3)))
})复制代码首先，执行vue指令，会执行@vue/cli/bin/vue.js，这里定义了vue add , vue invoke，vue build，vue serve，等指令，可以看出，add指令其实是包含invoke指令的，add指令主要是安装一个包，并且触发generator.js，invoke主要是触发generator.js。
然后再来看@vue/cli/lib/add.js，
const packageManager = loadOptions().packageManager || (hasProjectYarn(context) ? 'yarn' : 'npm')
await installPackage(context, packageManager, options.registry, packageName)复制代码 const generatorPath = resolveModule(`${packageName}/generator`, context)
if (generatorPath) {
invoke(pluginName, options, context)
} else {
log(`Plugin ${packageName} does not have a generator to invoke`)
}复制代码add.js主要安装包，然后执行invoke模块，我们再看看invoke模块做了什么。
@vue/cli/lib/invoke.js
const generator = new Generator(context, {
pkg,
plugins: [plugin],
files: await readFiles(context),
completeCbs: createCompleteCbs,
invoking: true
})复制代码invoke里主要实例化generator类，然后把你的插件当成参数传给类，generator类算是vue-cli的核心类了。
@vue/cli/lib/generator.js
plugins.forEach(({ id, apply, options }) => {
const api = new GeneratorAPI(id, this, options, rootOptions)
apply(api, options, rootOptions, invoking)
})复制代码这个类主要负责执行你的插件，然后把generatorapi作为参数传入插件的generator.js导出的函数。
具体的vue-cli插件的开发是怎么样的呢，我写了一个demo，用在模拟多项目的ci模版管理，通常每个项目都有一份.gitlab-ci.yml模版，所以我们一般可以抽出一个公共的ci模版来管理，这里我用cli插件来管理，真正的项目可能不具备可行性，这里我只是用来写一个例子。
目录结构大概如上所示，执行vue add foo后，就会出现propmts对话框，然后选择答案后，就会根据配置生成模版到你的根目录下。
_gitlab-ci.yml ,根据问题选择是否用私有npm仓库：
script:
<%_ if (options.config === 'npm') { _%>
- nrm add companynpm http://xxx.y.cn:XXXXX/
- nrm use companynpm
<%_ } _%>复制代码prompts.js,主要一些问题的设计：
module.exports = [
{
name: 'config',
type: 'list',
message: `是否需要切换内部源:`,
choices: [
{
name: '需要',
value: 'npm',
short: ''
},
{
name: '不需要',
value: 'npm',
short: ''
}
]
}
]复制代码generator.js 这个模块很简单，直接渲染模版
module.exports = (api, options, rootOptions) => {
// 复制并用 ejs 渲染 `./template` 内所有的文件
api.render('./template')
}复制代码service插件主要放在项目本地，是一份js代码，然后导出一个函数，通过package.json配置指向这个js文件的路径，
service主要依赖的代码在@vue/cli-service里，首先先执行@vue/cli-service/bin/vue-cli-service.js文件，
const Service = require('../lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())
.....
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})复制代码该文件实例化Service类，这个类是service插件的核心类，然后再执行run方法。
再来看看@vue/cli-service/lib/Service.js的代码：
首先构造函数执行resolvePlugin，把官方提供的插件和项目里的插件都加载进来，
constructor (context, { plugins, pkg, inlineOptions, useBuiltIn } = {}) {
this.plugins = this.resolvePlugins(plugins, useBuiltIn)
}复制代码resolvePlugin这个函数主要在这里引入本地的插件：
resolvePlugins (inlinePlugins, useBuiltIn) {
// Local plugins
if (this.pkg.vuePlugins && this.pkg.vuePlugins.service) {
const files = this.pkg.vuePlugins.service
if (!Array.isArray(files)) {
throw new Error(`Invalid type for option 'vuePlugins.service', expected 'array' but got ${typeof files}.`)
}
plugins = plugins.concat(files.map(file => ({
id: `local:${file}`,
apply: loadModule(file, this.pkgContext)
})))
}
return plugins
}复制代码run方法又会执行init方法，在该方法内部执行插件：
init (mode = process.env.VUE_CLI_MODE) {
// apply plugins.
this.plugins.forEach(({ id, apply }) => {
apply(new PluginAPI(id, this), this.projectOptions)
}
}复制代码
那么service插件要如何来实践，我们来看如下的例子：
首先在package.json配置一下，指向本地的插件my-service.js
"vuePlugins": {
"service": [
"my-service.js"
]
}复制代码my-service.js的代码如下所示：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpack = require('webpack');
module.exports = (api, projectOptions) => {
api.registerCommand(
'analyze',
{
description: 'start analyze server',
},
(args) => {
// 注册 `vue-cli-service analyze`
let options = projectOptions.pluginOptions.demoOptions
console.log(options);
// resolve webpack config
const webpackConfig = api.resolveWebpackConfig();
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
webpack(webpackConfig,(err,stats)=>{
if(!err) console.log('打包成功')
})
},
);
};复制代码该插件主要扩展vue-cli-service的指令，加了analyze指令，这个指令主要会向webpack的配置增加一个BundleAnalyzerPlugin的插件，用来分析包的大小，当然，这里也是没有太大的现实可行性的，vue-cli 提供了vue ui的Gui界面让你看到打包后各个模块的大小，或者cli的命令，vue-cli-service build --report，也能生一个报告，效果也是一样。
至此，vue-cli和service插件的使用和实现都介绍完了，如果有哪里写的不到位，希望各位大神能提出指正。