一篇文章,教你學(xué)會(huì)Vue CLI 插件開發(fā)
前言
如果你正在使用Vue框架,那么你肯定知道Vue CLI是什么。Vue-cli 3,它是Vue.js 開發(fā)的標(biāo)準(zhǔn)工具(腳手架),提供項(xiàng)目支架和原型設(shè)計(jì)。
除了日常構(gòu)建打包項(xiàng)目,Vue CLI3 的一個(gè)重要部分是cli-plugins,插件開發(fā)。
本文將教你如何科學(xué)的創(chuàng)建一個(gè)Vue-CLI 插件,以及項(xiàng)目獨(dú)立npm包。
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庫,如iview或ElementUI ....如果你想為某個(gè)特定的庫提供一個(gè)插件但卻不存在呢?這時(shí)候,構(gòu)建一個(gè)屬于自己項(xiàng)目的插件就是個(gè)不錯(cuò)的選擇。
在本文中,我們將構(gòu)建一個(gè)vue-cli-plugin-rx。它允許我們向項(xiàng)目添加vue-rx庫,并在我們的Vue應(yīng)用程序中獲得RxJS支持
2. Vue-cli插件目錄結(jié)構(gòu)
CLI 插件是一個(gè)可以為 @vue/cli項(xiàng)目添加額外特性的 npm 包。它應(yīng)該始終包含:
- 一個(gè)Service插件作為其主要導(dǎo)出
- 可選的包含一個(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長這樣:
module.exports = (api, opts) => {}
如果你想改變內(nèi)部webpack配置或其它操作,請(qǐng)?jiān)诠俜絍ue CLI文檔中閱讀本節(jié)
2.3 Package.json
keywords 指定了在庫中搜索時(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è)簡單的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è)簡單的RxJS驅(qū)動(dòng)的計(jì)數(shù)器,帶有兩個(gè)按鈕
源碼如下:
<template> <section> <h1>Click on 'Count' button to count your clicks</h1> <button v-stream:click="count$">Count clicks</button> <button @click="clearCounter">Clear counter</button> <p>{{result$}}</p> </section> </template> <script> import { filter, bufferWhen, debounceTime, map, startWith, } from 'rxjs/operators'; export default { domStreams: ['count$'], 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); }, }, }; </script>
<style> button { padding: 10px; font-size: 14px; margin-right: 10px; border-radius: 4px; outline: none; } </style>
不需要關(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-<name> 的命名約定將其發(fā)布到 npm 上。插件遵循命名約定之后就可以:
被 @vue/cli-service 發(fā)現(xiàn);
被其他開發(fā)者搜索到;
通過 vue add <name>或 vue invoke <name> 安裝下來。
你只需要在package.json中添加描述description,以及在插件項(xiàng)目根目錄下創(chuàng)建logo.png。
接下來就是注冊(cè)npmjs.com
2、設(shè)置倉庫地址為npm官方倉庫地址(國內(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)目
完事。
總結(jié)
Vue-CLI插件開發(fā),對(duì)于很多項(xiàng)目,當(dāng)你需要引入一些自己以前編寫過的組件或功能,卻不想復(fù)刻一遍main.js和Package.json,學(xué)會(huì)了這招,開發(fā)賊快。當(dāng)有人問你如何組織項(xiàng)目的組件庫時(shí),嘖嘖...你說你都是安裝自己寫的插件。
以上所述是小編給大家介紹的Vue CLI 插件開發(fā)詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐
本文主要介紹了vue?mixins代碼復(fù)用的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05Vue3實(shí)現(xiàn)優(yōu)雅加載圖片的動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Vue3如何實(shí)現(xiàn)加載圖片時(shí)添加一些動(dòng)畫效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2023-10-10Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題
這篇文章主要介紹了Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù),需要的朋友可以參考下2019-04-04基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別(詳解)
下面小編就為大家分享一篇基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析,技術(shù)點(diǎn)較多,所以篇幅較長,認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí),需要的朋友可以參考下2022-09-09