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

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

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

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

     需求確定后，我們就知道這個插件需要做的事情就是創(chuàng)建一個vue組件實例=>加載后端返回的頁面=>解析并執(zhí)行其中的js文件=>注冊驗證成功的全局回調(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 id="antiReptWrapper" style="z-index:9999 !important;"></div>'
   });
   let antiObj = new wrapperTemp().$mount().$el; // 2、創(chuàng)建實例
   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)建的實例添加到App中
   window.checkSucceed = res => {
    // 5、驗證通過后移除實例
    App.removeChild(antiObj);
    window.location.reload();
   };
  };
 }
};

    需要注意的是通過設(shè)置innerHTML 的方式加載驗證頁面會導(dǎo)致內(nèi)部的js文件不執(zhí)行；因此我們還必須將驗證頁面的的js文件提取出來再重新插入，并且還要保證內(nèi)部多個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 {//保證每個js文件按照之前的順序執(zhí)行
   newScripts[i - 1].onload = newScripts[
    i - 1
   ].onreadystatechange = function(event) {
    cont.appendChild(newScripts[i]);
   };
  }
 }
};

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

    將寫好的插件生成npm包的方法也簡單，分為以下幾步：

1、前往npm官網(wǎng)注冊一個npm賬號=>【npm官網(wǎng)】;

2、將寫好的插件生成一個簡單的npm包：

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

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

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

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

以上就是如何構(gòu)建一個Vue插件并生成npm包的詳細內(nèi)容，更多關(guān)于vue生成npm包的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論