🎈 岁末优惠:现在订阅全年,多送一年会员。 立即订阅

Vue CLI:项目的超级 “外挂”

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,你就可以去开发跨平台小程序了。订阅宁皓网 

插件地址:

https://www.npmjs.com/package/vue-cli-plugin-nid



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

13052
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点