vue的插件一般用來(lái)添加全局性的功能，具體可分為：

添加全局方法或者屬性； 添加全局資源（指令、過(guò)濾器等）； 通過(guò)全局 mixin 方法添加一些組件選項(xiàng)； 在 Vue.prototype 上 添加 Vue 實(shí)例方法； 創(chuàng)建一個(gè)庫(kù)，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能；

一般來(lái)說(shuō)我們?cè)陧?xiàng)目中傾向于第五種方式，可以通過(guò)創(chuàng)建一個(gè)js文件包含我們需要添加的多種全局性功能，指令、過(guò)濾器、實(shí)例方法之類(lèi)的。這樣的一個(gè)插件的構(gòu)建也不難，主要就是使用vue提供的install 方法，傳入Vue構(gòu)造器以及你所能用到的參數(shù)對(duì)象；添加對(duì)應(yīng)的功能，export出去，在需要的地方引入并Vue.use()方法注冊(cè)即可；具體使用參考vue官網(wǎng)插件部分——開(kāi)發(fā)插件。

這一次我的項(xiàng)目中需要添加‘反爬’功能，具體實(shí)現(xiàn)就是后端在檢測(cè)到用戶(hù)觸發(fā)‘反爬’規(guī)則后返回指定錯(cuò)誤碼以及對(duì)應(yīng)的驗(yàn)證頁(yè)面，前端在全局請(qǐng)求中監(jiān)測(cè)該錯(cuò)誤碼，在檢測(cè)到錯(cuò)誤碼后通過(guò)插件加載驗(yàn)證頁(yè)面讓用戶(hù)去驗(yàn)證，并將驗(yàn)證結(jié)果反饋給后端，在后端收到驗(yàn)證結(jié)果后移除驗(yàn)證頁(yè)面。

需求確定后，我們就知道這個(gè)插件需要做的事情就是創(chuàng)建一個(gè)vue組件實(shí)例=>加載后端返回的頁(yè)面=>解析并執(zhí)行其中的js文件=>注冊(cè)驗(yàn)證成功的全局回調(diào)函數(shù)。具體操作如下：

const antiReptilian = { install(Vue, options) { Vue.$antirept = checkText => { if (!checkText) return; let wrapperTemp = Vue.extend({ // 1、創(chuàng)建構(gòu)造器，定義模板 template: ’<div style='z-index:9999 !important;'></div>’ }); let antiObj = new wrapperTemp().$mount().$el; // 2、創(chuàng)建實(shí)例 antiObj.innerHTML = checkText; initScripts(antiObj);//3、解析并順序執(zhí)行js let App = document.getElementById(’app’); let wrapper = document.getElementById(’antiReptWrapper’); if (wrapper) { return; } App.appendChild(antiObj); // 4、把創(chuàng)建的實(shí)例添加到App中 window.checkSucceed = res => { // 5、驗(yàn)證通過(guò)后移除實(shí)例 App.removeChild(antiObj); window.location.reload(); }; }; }};

需要注意的是通過(guò)設(shè)置innerHTML 的方式加載驗(yàn)證頁(yè)面會(huì)導(dǎo)致內(nèi)部的js文件不執(zhí)行；因此我們還必須將驗(yàn)證頁(yè)面的的js文件提取出來(lái)再重新插入，并且還要保證內(nèi)部多個(gè)js文件的執(zhí)行順序，具體代碼如下：

//重新引入js文件const initScripts = function(cont) { let oldScripts = cont.getElementsByTagName(’script’); let newScripts = []; for (let i = 0; i < oldScripts.length; i++) {//提取內(nèi)部js文件 let newScript = document.createElement(’script’); newScript.type = ’text/javascript’; newScript.innerHTML = oldScripts[i].innerHTML; if (oldScripts[i].src) { newScript.src = oldScripts[i].src; } newScripts.push(newScript); } while (oldScripts.length !== 0) { cont.removeChild(oldScripts[0]);//移除之前的js文件 } for (let i = 0; i < newScripts.length; i++) { if (i == 0) { cont.appendChild(newScripts[i]); } else {//保證每個(gè)js文件按照之前的順序執(zhí)行 newScripts[i - 1].onload = newScripts[ i - 1 ].onreadystatechange = function(event) { cont.appendChild(newScripts[i]); }; } }};

到此為止這個(gè)簡(jiǎn)單的插件功能就完成了，在需要的地方引入、注冊(cè)并調(diào)用Vue.$antirept()方法傳入要加載的頁(yè)面即可；

將寫(xiě)好的插件生成npm包的方法也簡(jiǎn)單，分為以下幾步：

1、前往npm官網(wǎng)注冊(cè)一個(gè)npm賬號(hào)=>【npm官網(wǎng)】;

2、將寫(xiě)好的插件生成一個(gè)簡(jiǎn)單的npm包：

創(chuàng)建一個(gè)空文件夾，名稱(chēng)即為你的npm包的名稱(chēng)，注意名稱(chēng)不要與現(xiàn)有的npm包重復(fù)； 切到該文件夾下，輸入‘npm init’命令生成一個(gè)package.json文件，內(nèi)部信息自定義； 將寫(xiě)好的插件js文件拷到該文件夾下，重命名為index.js； 在根目錄下創(chuàng)建README.md文件，添加關(guān)于包的介紹信息（非必需）；

3、發(fā)布創(chuàng)建好的包：

1. 若第一次發(fā)布包，執(zhí)行‘ npm adduser’命令，輸入前面注冊(cè)好的npm賬號(hào)，密碼和郵箱；2. 若不是第一次發(fā)布包，執(zhí)行‘ npm login’命令進(jìn)行登錄，同樣輸入npm賬號(hào)，密碼和郵箱；3. 登錄成功以后，在剛才的文件夾下，執(zhí)行‘npm publish’命令，即可發(fā)布該npm包；4. 若要更新之前的包，只需要更改版本號(hào)，再執(zhí)行‘npm publish’命令即可；

至此一個(gè)簡(jiǎn)單的vue插件就生成了一個(gè)npm包了，以后使用就不需要加載js文件，可以直接通過(guò)npm的方式引入了，其它的小伙伴也可以一起愉快的玩耍了==>全劇終。

以上就是如何構(gòu)建一個(gè)Vue插件并生成npm包的詳細(xì)內(nèi)容，更多關(guān)于vue生成npm包的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！