当你看过了官方的几个插件之后，慢慢地，其实你也有需求了。
那如何编写一个 Vue CLI 3 的插件呢？
本文代码已经放到 github 上，地址：https://github.com/dailynodej...
我们建一个文件夹，取名 vue-cli-plugin-demo，创建一个 index.js
module.exports = (api, projectOptions) => {//...
}因为我们看遍了 cli-plugin-babel、cli-plugin-eslint 等，我们发现他们的最外层结构多是类似的：
多有一个 index.js：
接受 2 个参数：
- api
- options
module.exports = (api, options) => {// ...
}里面就是插件的核心部分，我们观察到它们两个也很类似，多用到了：
api.chainWebpack(webpackConfig => {// ...
})但同时在 eslint 的源码中，我们看到了：
api.registerCommand('lint', {
}, args => {// ...
})我们看项目根目录的 package.json 有一个命令
"scripts": {"lint": "vue-cli-service lint"
}所以看起来：api.registerCommand 就是可以注册命令的。
大家还记得我们还有其他之前介绍过的命令吗：
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"
}我们看一下它们是不是也是这样注册的：
在 @vue/cli-service/lib/commands/build/ 中
module.exports = (api, options) => {api.registerCommand('build', {}, async (args) => {})
}在 cli-service/lib/commands/serve.js 中
module.exports = (api, options) => {api.registerCommand('serve', {}, async function serve (args) {})
}那我们的 demo 也注册一个命令：
module.exports = (api, projectOptions) => {api.registerCommand('demo', {description: 'demo plugin for vue cli 3',usage: 'vue-cli-service demo',options: {}}, (args) => {let options = projectOptions.pluginOptions.demoOptionsconsole.log('options', options)})
}这里要提到 vue.config.js 里面的一个配置项了 pluginOptions
它可以用来给第三方插件传递配置
所以我们正好可以通过它进行一些配置：
module.exports = {pluginOptions: {demoOptions: {c: 1,d: 2}}
}然后在插件里面获取的方式就是上面的代码中：
let options = projectOptions.pluginOptions.demoOptions
