這篇文章將為大家詳細講解有關Vue插件如何構建并生成npm包，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設、網(wǎng)站重做改版、廣州網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5建站、商城網(wǎng)站建設、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為廣州等各大城市提供網(wǎng)站開發(fā)制作服務。

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

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

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

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

     需求確定后，我們就知道這個插件需要做的事情就是創(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)建構造器，定義模板
    template:
     '<div id="antiReptWrapper" ></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();
   };
  };
 }
};

分享標題：Vue插件如何構建并生成npm包-創(chuàng)新互聯(lián)
當前地址：http://jinyejixie.com/article2/ccshic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、營銷型網(wǎng)站建設、ChatGPT、響應式網(wǎng)站、企業(yè)建站、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)