這篇文章主要為大家展示了“Vue CLI插件開發(fā)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue CLI插件開發(fā)的示例分析”這篇文章吧。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供江達(dá)企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、網(wǎng)站制作、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為江達(dá)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

1. 什么是CLI plugin

它可以修改內(nèi)部webpack配置并將命令注入到vue-cli-service。一個(gè)很好的例子是@vue/cli-plugin-typescript：當(dāng)你調(diào)用它時(shí)，它會(huì)tsconfig.json為你的項(xiàng)目添加一個(gè)并更改App.vue類型，整個(gè)過程不需要手動(dòng)執(zhí)行。
插件非常有用，但有很多不同的情況: Electron構(gòu)建器，添加UI庫(kù)，如iview或ElementUI ....如果你想為某個(gè)特定的庫(kù)提供一個(gè)插件但卻不存在呢？這時(shí)候，構(gòu)建一個(gè)屬于自己項(xiàng)目的插件就是個(gè)不錯(cuò)的選擇。

在本文中，我們將構(gòu)建一個(gè)vue-cli-plugin-rx。它允許我們向項(xiàng)目添加vue-rx庫(kù)，并在我們的Vue應(yīng)用程序中獲得RxJS支持

2. Vue-cli插件目錄結(jié)構(gòu)

CLI 插件是一個(gè)可以為 @vue/cli項(xiàng)目添加額外特性的 npm 包。它應(yīng)該始終包含:

1. 一個(gè)Service插件作為其主要導(dǎo)出

2. 可選的包含一個(gè) Generator 和一個(gè) Prompt 文件。

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

如果你需要在插件安裝的同時(shí)，通過命令行來選擇是否創(chuàng)建一些示例組件，那么目錄可以改為：

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

2.1 GeneratorAPI

一個(gè)發(fā)布為 npm 包的 CLI 插件可以包含一個(gè) generator.js 或 generator/index.js 文件。插件內(nèi)的 generator 將會(huì)在兩種場(chǎng)景下被調(diào)用：

在一個(gè)項(xiàng)目的初始化創(chuàng)建過程中，如果 CLI 插件作為項(xiàng)目創(chuàng)建 preset 的一部分被安裝。
插件在項(xiàng)目創(chuàng)建好之后通過 vue invoke 獨(dú)立調(diào)用時(shí)被安裝。

GeneratorAPI允許一個(gè) generator 向 package.json 注入額外的依賴或字段，并向項(xiàng)目中添加文件。

2.2 Service 插件

Service 插件接收兩個(gè)參數(shù)的函數(shù)：一個(gè)PluginAPI實(shí)例和一個(gè)包含項(xiàng)目本地選項(xiàng)的對(duì)象。它可以擴(kuò)展/修改不同環(huán)境的內(nèi)部webpack配置，并為其注入其他命令vue-cli-service。
但在這里，我們只想在必要時(shí)添加一些依賴項(xiàng)和示例組件。所以我們的index.js長(zhǎng)這樣：

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

如果你想改變內(nèi)部webpack配置或其它操作，請(qǐng)?jiān)诠俜絍ue CLI文檔中閱讀本節(jié)

2.3 Package.json

keywords 指定了在庫(kù)中搜索時(shí)能夠被哪些關(guān)鍵字搜索到，所以一般這個(gè)會(huì)多寫一些項(xiàng)目相關(guān)的詞在這里，是一個(gè)字符串的數(shù)組。

{
 "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添加依賴項(xiàng)

generator可幫助我們添加依賴項(xiàng)并更改項(xiàng)目文件。所以，我們需要的第一步是讓我們的插件添加依賴項(xiàng)：rxjs和vue-rx（你也可以添加其它）：

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

generator 導(dǎo)出一個(gè)接收三個(gè)參數(shù)的函數(shù)：GeneratorAPI實(shí)例，生成器選項(xiàng)和 - 如果用戶使用某個(gè)預(yù)設(shè)創(chuàng)建項(xiàng)目 - 整個(gè)預(yù)設(shè)將作為第三個(gè)參數(shù)傳遞。

api.extendPackage方法將會(huì)修改項(xiàng)目的package.json。

在本文的例子中，我們將兩個(gè)依賴項(xiàng)添加到dependencies。

現(xiàn)在我們需要更改main.js文件。為了使RxJS能在Vue組件中工作，我們需要導(dǎo)入VueRx和調(diào)用Vue.use(VueRx)

首先，我們創(chuàng)建一個(gè)想要添加的字符串到主文件：

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

 使用api.onCreateCompletehook。在文件寫入磁盤時(shí)調(diào)用它:

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

現(xiàn)在我們修改文件內(nèi)容:

api.onCreateComplete(() => {
 const fs = require('fs');
 const mainPath = api.resolve('./src/main.js');
 // 獲取內(nèi)容
 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;
 // 修改應(yīng)用
 contentMain = lines.reverse().join('\n');
 fs.writeFileSync(mainPath, contentMain, { encoding: 'utf-8' });
 });
};

4. 本地測(cè)試cli-plugin

首先我們創(chuàng)建一個(gè)簡(jiǎn)單的Vue-cli項(xiàng)目：

vue create test-app

 cd到項(xiàng)目文件夾并安裝我們新創(chuàng)建的插件：

cd test-app
npm install --save-dev file://Users/hiro/練習(xí)/測(cè)試/vue-plugin

 安裝插件后，需要調(diào)用它：

vue invoke vue-cli-plugin-rx

 現(xiàn)在，你查看test-app項(xiàng)目的main.js,將會(huì)看到：

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

同時(shí)，查看package.json將會(huì)發(fā)現(xiàn)：

"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創(chuàng)建示例組件

經(jīng)過上面的驗(yàn)證，插件已有效。此時(shí)，我們可以擴(kuò)展一下它的功能，創(chuàng)建示例組件，方便其他人理解和使用。

5.1 編寫示例組件

我們創(chuàng)建的這個(gè)示例組件。它應(yīng)該是位于項(xiàng)目src/components文件夾中的文件。

于是我們可以在generator目錄下，創(chuàng)建/template/src/components:

這一個(gè)簡(jiǎn)單的RxJS驅(qū)動(dòng)的計(jì)數(shù)器，帶有兩個(gè)按鈕

源碼如下：

 不需要關(guān)心RxJS做了什么（反正我也沒看懂），引就vans了。

此時(shí)我們需要改動(dòng)generator/index.js，使它可以識(shí)別并寫入文件夾。

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

當(dāng)你調(diào)用 api.render('./template')時(shí)，generator將會(huì)使用 EJS渲染 ./template中的文件 (相對(duì)于 generator中的文件路徑進(jìn)行解析)

5.2 命令行提示安裝

如果用戶是個(gè)老手，不想擁有示例組件，該怎么辦？在插件安裝過程中，我們可以向prompts.js添加提示代碼，以供用戶在命令行選擇：

module.exports = [
 {
  name: `addExample`,
  type: 'confirm',
  message: '是否添加示例組件到項(xiàng)目components目錄？',
  default: false,
 },
];

詢問用戶是否要將示例組件添加到項(xiàng)目components目錄下。默認(rèn)是：false。

這時(shí)我們需要修改下generator/index.js:

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

此時(shí)我們撤回安裝，重新運(yùn)行

 yarn add --save-dev file://Users/hiro/練習(xí)/測(cè)試/vue-plugin
vue invoke vue-cli-plugin-rx

 將會(huì)看到：

此時(shí)你查看項(xiàng)目components目錄，將會(huì)發(fā)現(xiàn)多了示例組件文件

6.如何發(fā)布插件

來自官方文檔

為了讓一個(gè) CLI 插件能夠被其它開發(fā)者使用，你必須遵循 vue-cli-plugin- 的命名約定將其發(fā)布到 npm 上。插件遵循命名約定之后就可以：

被 @vue/cli-service 發(fā)現(xiàn);
被其他開發(fā)者搜索到；
通過 vue add 或 vue invoke 安裝下來。

你只需要在package.json中添加描述description，以及在插件項(xiàng)目根目錄下創(chuàng)建logo.png。
接下來就是注冊(cè)npmjs.com

 2、設(shè)置倉(cāng)庫(kù)地址為npm官方倉(cāng)庫(kù)地址(國(guó)內(nèi)大部分都使用阿里淘寶鏡像，如果沒改publish會(huì)失敗)
npm config set registry https://registry.npmjs.org/

3、登陸npm,用戶名密碼郵箱需要全部匹配
npm whoami
npm login
Username: xxxxx
Password:
Email: (this IS public) xxx@gmail.com
Logged in as xxxxx on https://registry.npmjs.org/.

4、登陸完可以publish了,執(zhí)行以下命令
cd dist && npm publish && cd ../
或npm publish dist
輸出以下信息說明發(fā)布成功
+ ngx-xxx@0.0.1
這時(shí)登錄https://www.npmjs.com/可以看到自己發(fā)布的項(xiàng)目

完事。

以上是“Vue CLI插件開發(fā)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！