Vue CLI 是 Vue 项目的超级外挂，我们平时一般会用它创建 Vue 项目，启动开发服务，还有编译项目。Vue CLI 可以通过插件扩展它的功能，插件可以修改项目里的东西，比如修改 package.json ，在里面添加点新的依赖或者自定义的命令等等。插件还可以在项目里面添加新的东西，比如创建新的组件，样式，路由或者 Store 等等。
问题
创建组件是我们在开发 Vue 应用的时候经常做的一件事，首先要在项目里创建一个组件文件，然后在里面定义一个基本的组件，设置一下组件的名字，去给组件创建一个样式表文件，然后在这个新创建的组件里导入使用这个样式表。如果组件里需要使用 Vuex 的帮手方法，你需要先从 vuex 里面导入这些帮手方法，然后分别在 computed，methods 里面使用这些帮手方法。如果你需要在父组件那里使用这个组件，需要打开父组件，导入这个组件，注册这个组件，再在父组件的模板里使用这个组件。
从上面的描述可以看出问题，就是很多动作都是重复的，而且具有特定的行为模式。最简单的解决方法就是在项目里定义一些代码片断，这样你可以在项目文件的里快速插入使用这些代码片断。更好的方法就是去创建一个 Vue CLI 插件，根据自己项目的需要定制这些插件，通过命令快速创建应用需要的各种零部件。
插件原理
一个 Vue CLI 插件就是一个普通的 Node.js 项目，只不过在这个项目里你可以使用 Vue CLI 提供的一些接口去做事情，比如在文件里插入导入声明，修改 package.json 等等。创建一个 Node.js 项目，项目的名字要用 vue-cli-plugin 开头，后面可以再加上一部分描述插件作用的名字，比如 vue-cli-plugin-generate 。
在项目的根目录下面创建一个 index.js 文件，在这个文件里你可以定义 service 插件，你可以在这种插件里面修改 webpack 配置，创建新的 service 命令，或者修改现有的命令等等。启动项目开发服务的时候用的就是一个 service 插件。如果你不打算定义 service 插件，可以在 index.js 文件里导出一个空白的函数，像这样：
index.js
module.exports = () => {};Generator
我们在项目里添加新的东西，修改现有的东西，要用的就是 Vue CLI 提供的 Generator。在插件项目里可以创建一个 generator.js ，或者 generator/index.js。
generator/index.js
/**
* 生成器
*/
module.exports = (api, options) => {
console.log(options);
};
导出一个函数，这个函数有两个参数，api 与 options，这里的 api 指的是 Generator API，给了我们一些方法。options 里的东西是执行命令的时候提供的选项。
执行插件里的 generator 可以使用 vue invoke 这个命令，像这样：
vue invoke vue-cli-plugin-nid
vue-cli-plugin-nid 是插件的名字，执行上面这个命令，会运行在 cli 插件里的 generator.js 或者 generator/index.js 。
命令选项
Generator 里的 options 这个参数的值，就是执行命令的时候提供的选项，比如 --component comment-list，这样你在 generator 里的 options 里面就可以得到 component 这个选项的值，也就是 comment-list，我们在插件里可以通过这些选项来判断到底要去做什么事情。
vue invoke vue-cli-plugin-nid --component comment-list
两条小横线，后面是选项的名字。--component 是提供的一个选项，comment-list 是给这个选项提供的值。如果在选项的后面没有设置具体的值，默认选项的值就会是 true。使用一条小横线也可以给 generator 提供选项，比如 -iv，这样就会在 options 里面出现两个选项，i 与 v ，默认它们的值都会是 true。
修改 package.json
使用 api.extendPackage 这个方法，你可以修改项目里的 package.json 文件，像这样：
api.extendPackage({
scripts: {
'generate:component': 'vue invoke vue-cli-plugin-nid --component',
},
});这样如果执行了插件里的 generator，就会在项目的 package.json 文件的 scripts 里面添加一条自定义的命令。
插入导入声明
使用 api.injectImports，可以在指定的文件里插入导入声明，像这样：
api.injectImports('src/app.router.ts', `import postRoutes from '@/post/post.routes'`);执行插件里的 generator ，就会在 src/app.router.ts 这个文件里插入一条导入模块用的声明。
生成文件
使用 api.render，我们可以渲染 cli 项目里的一个模板文件（.ejs） ，放到 Vue 项目里。比如在 cli 项目里创建一个模板文件：
generator/templates/component.ejs
<script>
export default {
<div><%= text %></div>
};
</script>在模板文件里可以使用 ejs 的语法，输出给模板文件传递的值，或者去做一些逻辑判断等等。如果现在我要把这个模板文件里定义的这个组件放到项目里，可以这样做：
api.render(
{
'src/app/components/greet.vue': './templates/component.ejs',
},
{
text: '你好 ~'
},
);现在执行插件的 generator，就会基于 component.ejs 文件里的内容创建一个组件，放在项目的 src/app/components 的下面，名字是 greet.vue 。这个 render 方法的第二个对象参数是给模板文件提供的值，这里提供了一个叫 text 的东西，对应的值是 你好 ~ ，这样如果在模板文件里输出 text 这个值的地方，就会变成 你好 ~ 。
修改项目文件内容
项目里的文件你可以在 api.generator.files 里面找到，比如在 cli 插件里，想知道 src/app/components/greet.vue 这个文件内容，可以访问：
api.generator.files['src/app/components/greet.vue'];
知道了项目文件位置与内容以后，你就可以修改文件里的内容了。可以使用 Node.js 提供的 fs 模块写入文件，比如 fs.writeFileSync 。一般修改文件的动作可以放在执行完 generator 以后去做，所以你可以放在生成器的钩子里去做。
generator/index.js
/**
* 生成器钩子
*/
module.exports.hooks = (api, options) => {
api.afterInvoke(() => {
// fs.writeFileSync...
});
}总结
以上基本就是你要开发 Vue CLI 插件需要知道的大部分内容了。剩下的事儿就是琢磨怎么去使用这些工具完成自己想做的事情了。你可以参考我给自己的一个项目创建的 cli 插件，这个插件可以快速生成组件与 Store，适用于使用 TypeScript 开发的 Vue 项目。
宁皓网已经开始陆续发布最新版本的 Vue 框架课程，大家现在就可以订阅学习了。后面会再安排一些 uniapp 课程，这样搭配 Vue ，还有 Node.js，你就可以去开发跨平台小程序了。订阅宁皓网 →
插件地址：
