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

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

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

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

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

    這一次我的項(xiàng)目中需要添加‘反爬'功能，具體實(shí)現(xiàn)就是后端在檢測(cè)到用戶觸發(fā)‘反爬'規(guī)則后返回指定錯(cuò)誤碼以及對(duì)應(yīng)的驗(yàn)證頁(yè)面，前端在全局請(qǐng)求中監(jiān)測(cè)該錯(cuò)誤碼，在檢測(cè)到錯(cuò)誤碼后通過(guò)插件加載驗(yàn)證頁(yè)面讓用戶去驗(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 id="antiReptWrapper" ></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();
   };
  };
 }
};

分享標(biāo)題：Vue插件如何構(gòu)建并生成npm包-創(chuàng)新互聯(lián)
當(dāng)前地址：http://www.rwnh.cn/article2/ccshic.html

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

廣告

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