189 8069 5689
这篇文章主要为大家展示了“Vue CLI插件开发的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue CLI插件开发的示例分析”这篇文章吧。
成都创新互联公司是一家专业提供江达企业网站建设,专注与做网站、网站制作、H5高端网站建设、小程序制作等业务。10年已为江达众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
1. 什么是CLI plugin
它可以修改内部webpack配置并将命令注入到vue-cli-service。一个很好的例子是@vue/cli-plugin-typescript：当你调用它时，它会tsconfig.json为你的项目添加一个并更改App.vue类型，整个过程不需要手动执行。
插件非常有用，但有很多不同的情况: Electron构建器，添加UI库，如iview或ElementUI ....如果你想为某个特定的库提供一个插件但却不存在呢？这时候，构建一个属于自己项目的插件就是个不错的选择。
在本文中，我们将构建一个vue-cli-plugin-rx。它允许我们向项目添加vue-rx库，并在我们的Vue应用程序中获得RxJS支持
2. Vue-cli插件目录结构
CLI 插件是一个可以为 @vue/cli项目添加额外特性的 npm 包。它应该始终包含:
一个Service插件作为其主要导出
可选的包含一个 Generator 和一个 Prompt 文件。
.
├── 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 将会在两种场景下被调用：
在一个项目的初始化创建过程中，如果 CLI 插件作为项目创建 preset 的一部分被安装。
插件在项目创建好之后通过 vue invoke 独立调用时被安装。
GeneratorAPI允许一个 generator 向 package.json 注入额外的依赖或字段，并向项目中添加文件。
2.2 Service 插件
Service 插件接收两个参数的函数：一个PluginAPI实例和一个包含项目本地选项的对象。它可以扩展/修改不同环境的内部webpack配置，并为其注入其他命令vue-cli-service。
但在这里，我们只想在必要时添加一些依赖项和示例组件。所以我们的index.js长这样：
module.exports = (api, opts) => {}如果你想改变内部webpack配置或其它操作，请在官方Vue CLI文档中阅读本节
2.3 Package.json
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.js
module.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';\n\nVue.use(VueRx);`;
使用api.onCreateCompletehook。在文件写入磁盘时调用它:
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 test-app
cd到项目文件夹并安装我们新创建的插件：
cd test-app
npm 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"
}5. 通过generator创建示例组件
经过上面的验证，插件已有效。此时，我们可以扩展一下它的功能，创建示例组件，方便其他人理解和使用。
5.1 编写示例组件
我们创建的这个示例组件。它应该是位于项目src/components文件夹中的文件。
于是我们可以在generator目录下，创建/template/src/components:
这一个简单的RxJS驱动的计数器，带有两个按钮
源码如下：
