转发链接：

1. 什么是 CLI plugin

如果你正在使用Vue框架，那么你肯定知道 VueCLI是什么。 Vue-CLI3，它是Vue.js 开发的标准工具（脚手架），提供项目支架和原型设计。

除了日常构建打包项目vue拖拽组件， VueCLI3 的一个重要部分是 cli-plugins，插件开发。它可以修改内部webpack配置并将命令注入到vue-cli-service。一个很好的例子是 @vue/cli-plugin-typescript：当你调用它时，它会 tsconfig.json为你的项目添加一个并更改 App.vue类型，整个过程不需要手动执行。

插件非常有用，但有很多不同的情况: Electron构建器，添加 UI库，如 iview或 ElementUI ….如果你想为某个特定的库提供一个插件但却不存在呢？这时候，构建一个属于自己项目的插件就是个不错的选择。

vue ui

在本文中，我们将构建一个 vue-cli-plugin-rx。它允许我们向项目添加 vue-rx库，并在我们的Vue应用程序中获得 RxJS支持。

2. Vue-cli插件目录结构

CLI 插件是一个可以为 @vue/cli项目添加额外特性的 npm 包。它应该始终包含:

.├── README.md├── generator.js  # generator (可选)├── prompts.js    # prompt 文件 (可选)├── index.js      # service 插件└── package.json

如果你需要在插件安装的同时，通过命令行来选择是否创建一些示例组件，那么目录可以改为：

.├── README.md├── generator│   └── index.js  # generator├── prompts.js    # 命令行提示安装├── index.js      # service 插件└── package.json

2.1 GeneratorAPI

一个发布为 npm 包的CLI 插件可以包含一个 generator.js 或 generator/index.js 文件。插件内的 generator 将会在两种场景下被调用：

GeneratorAPI允许一个 generator 向 package.json 注入额外的依赖或字段vue拖拽组件，并向项目中添加文件。

2.2 Service 插件

Service插件接收两个参数的函数：一个 PluginAPI实例和一个包含项目本地选项的对象。它可以扩展/修改不同环境的内部 webpack配置，并为其注入其他命令 vue-cli-service。

但在这里，我们只想在必要时添加一些依赖项和示例组件。所以我们的 index.js长这样：

module.exports = (api, opts) => {}

如果你想改变内部 webpack配置或其它操作，请在官方Vue CLI文档中阅读本节

2.3 Package.json

直接通过 npm init初始化

keywords 指定了在库中搜索时能够被哪些关键字搜索到，所以一般这个会多写一些项目相关的词在这里，是一个字符串的数组。

{  "name": "vue-cli-plugin-rx",  "version": "1.0.0"，  "description": "",  "main": "index.js",  "keywords": [    "vue",    "vue-cli",    "rxjs",    "vue-rx"  ],  "author": "",  "license": "ISC"}

3. 通过generator添加依赖项

generator可帮助我们添加依赖项并更改项目文件。所以，我们需要的第一步是让我们的插件添加两个依赖项： rxjs和 vue-rx：

// generator/index.jsmodule.exports = (api, options, rootOptions) => {  api.extendPackage({    dependencies: {      'rxjs': '^6.3.3',      'vue-rx': '^6.1.0',    },  });}

generator 导出一个接收三个参数的函数： GeneratorAPI实例，生成器选项和 – 如果用户使用某个预设创建项目 – 整个预设将作为第三个参数传递。

api.extendPackage方法将会修改项目的 package.json。

在本文的例子中，我们将两个依赖项添加到 dependencies。

现在我们需要更改 main.js文件。为了使 RxJS能在Vue组件中工作，我们需要导入 VueRx和调用 Vue.use(VueRx)

let rxLines = `nimport VueRx from 'vue-rx';nnVue.use(VueRx);`;

api.onCreateComplete(() => {    const fs = require('fs');    const mainPath = api.resolve(''./src/main.js');};

api.onCreateComplete(() => {    const fs = require('fs');    const mainPath = api.resolve('./src/main.js');    // 获取内容    let contentMain = fs.readFileSync(mainPath, { encoding: 'utf-8' });    const lines = contentMain.split(/r?n/g).reverse();    // 注入import    const lastImportIndex = lines.findIndex(line => line.match(/^import/));    lines[lastImportIndex] += rxLines;    // 修改应用    contentMain = lines.reverse().join('n');    fs.writeFileSync(mainPath, contentMain, { encoding: 'utf-8' });  });};

4. 本地测试cli-plugin

首先我们创建一个简单的Vue-cli项目：

vue create hello-world

cd到项目文件夹并安装我们新创建的插件：

cd hello-worldnpm install --save-dev file://Users/hiro/练习/测试/vue-plugin

安装插件后，需要调用它：

vue invoke vue-cli-plugin-rx

现在，你查看 test-app项目的 main.js,将会看到：

import Vue from 'vue'import App from './App.vue'import VueRx from 'vue-rx';Vue.use(VueRx);

同时，查看 package.json将会发现：

"dependencies": {    "core-js": "^2.6.5",    "rxjs": "^6.3.3",    "vue": "^2.6.10",    "vue-router": "^3.0.3",    "vue-rx": "^6.1.0",    "vuex": "^3.0.1"  }

3. 通过generator创建示例组件

经过上面的验证，插件已有效。此时，我们可以扩展一下它的功能，创建示例组件，方便其他人理解和使用。

3.1 编写示例组件

我们创建的这个示例组件。它应该是位于项目 src/components文件夹中的文件。

于是我们可以在 generator目录下，创建 /template/src/components:

这一个简单的 RxJS驱动的计数器，带有两个按钮

源码如下：

    
        
Click on 'Count' button to count your clicks
        Count clicks        Clear counter        
{{result$}}
    
import {  filter,  bufferWhen,  debounceTime,  map,  startWith,} from 'rxjs/operators';export default {  domStreams: ['count#39;],  subscriptions() {    return {      result$: this.count$.pipe(        filter(event => !!event),        bufferWhen(() => this.count$.pipe(debounceTime(400))),        map(clicks => clicks.length),        startWith(0),      ),    };  },  methods: {    clearCounter() {      this.count$.next(null);    },  },};button {  padding: 10px;  font-size: 14px;  margin-right: 10px;  border-radius: 4px;  outline: none;}

这里我们不需要关心 RxJS做了什么（反正我也没看懂），引入 就 vans了。

此时我们需要改动 generator/index.js，使它可以识别并写入文件夹。

api.render('./template', {  ...options,});

当你调用 api.render('./template')时，generator将会使用EJS渲染 `./template`中的文件 (相对于generator`中的文件路径进行解析)3.2 命令行提示安装

如果用户是个老手，不想拥有示例组件，该怎么办？在插件安装过程中，我们可以向 prompts.js添加提示代码，以供用户在命令行选择：

module.exports = [  {    name: `addExample`,    type: 'confirm',    message: '是否添加示例组件到项目components目录？',    default: false,  },];

询问用户是否要将示例组件添加到项目 components目录下。默认是： false。

这时我们需要修改下 generator/index.js:

if (options.addExample) {    api.render('./template', {      ...options,    });}

此时我们撤回安装，重新运行

yarn add --save-dev file://Users/hiro/练习/测试/vue-pluginvue invoke vue-cli-plugin-rx

将会看到：

此时你查看项目components目录，将会发现多了示例组件文件

5.如何发布插件

来自官方文档

为了让一个 CLI 插件能够被其它开发者使用，你必须遵循 vue-cli-plugin- 的命名约定将其发布到 npm 上。插件遵循命名约定之后就可以：

你只需要在 package.json中添加描述 description，以及在插件项目根目录下创建 logo.png。

接下来就是注册npmjs.com

2、设置仓库地址为npm官方仓库地址(国内大部分都使用阿里淘宝镜像，如果没改publish会失败)npm config set registry https://registry.npmjs.org/3、登陆npm,用户名密码邮箱需要全部匹配npm whoaminpm loginUsername: xxxxxPassword:Email: (this IS public) xxx@gmail.comLogged in as xxxxx on https://registry.npmjs.org/.4、登陆完可以publish了,执行以下命令cd dist && npm publish && cd ../或npm publish dist输出以下信息说明发布成功+ ngx-xxx@0.0.1这时登录https://www.npmjs.com/可以看到自己发布的项目

完事。

总结

Vue-CLI插件开发，对于很多项目，当你需要引入一些自己以前编写过的组件或功能，却不想复刻一遍main.js和Package.json，学会了这招，开发贼快。当有人问你如何组织项目的组件库时，啧啧…你说你都是安装自己写的插件。

推荐Vue学习资料文章：

《手拉手带你开启Vue3世界的鬼斧神工【实践】》

《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》

《怎样为你的 Vue.js 单页应用提速》

《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》

《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》

《Vue真是太好了 壹万多字的Vue知识点 超详细!》

《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》

《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》

《手把手教你深入浅出vue-cli3升级vue-cli4的方法》

《Vue 3.0 Beta 和React 开发者分别杠上了》

《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》

《Vue3 尝鲜》

《总结Vue组件的通信》

《手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】》

《Vue 开源项目 TOP45》

《2020 年，Vue 受欢迎程度是否会超过 React？》

《尤雨溪：Vue 3.0的设计原则》

《使用vue实现HTML页面生成图片》

《实现全栈收银系统（Node+Vue）（上）》

《实现全栈收银系统（Node+Vue）（下）》

《vue引入原生高德地图》

《Vue合理配置WebSocket并实现群聊》

《多年vue项目实战经验汇总》

《vue之将echart封装为组件》

《基于 Vue 的两层吸顶踩坑总结》

《Vue插件总结【前端开发必备】》

《Vue 开发必须知道的 36 个技巧【近1W字】》

《构建大型 Vue.js 项目的10条建议》

《深入理解vue中的slot与slot-scope》

《手把手教你Vue解析pdf(base64)转图片【实践】》

《使用vue+node搭建前端异常监控系统》

《推荐 8 个漂亮的 vue.js 进度条组件》

《基于Vue实现拖拽升级（九宫格拖拽）》

《手摸手，带你用vue撸后台 系列二(登录权限篇)》

《手摸手，带你用vue撸后台 系列三(实战篇)》

《前端框架用vue还是react？清晰对比两者差异》

《Vue组件间通信几种方式，你用哪种？【实践】》

《浅析 React / Vue 跨端渲染原理与实现》

《10个Vue开发技巧助力成为更好的工程师》

《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》

《1W字长文+多图，带你了解vue的双向数据绑定源码实现》

《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》

《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》

《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》

《手把手教你D3.js 实现数据可视化极速上手到Vue应用》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》

《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》

《Vue3.0权限管理实现流程【实践】》

《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》

限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688