溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue插件如何構建并生成npm包，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
vue的插件一般用來添加全局性的功能，具體可分為：
一般來說我們在項目中傾向于第五種方式，可以通過創建一個js文件包含我們需要添加的多種全局性功能，指令、過濾器、實例方法之類的。這樣的一個插件的構建也不難，主要就是使用vue提供的install 方法，傳入Vue構造器以及你所能用到的參數對象；添加對應的功能，export出去，在需要的地方引入并Vue.use()方法注冊即可；具體使用參考vue官網插件部分——開發插件。
這一次我的項目中需要添加‘反爬'功能，具體實現就是后端在檢測到用戶觸發‘反爬'規則后返回指定錯誤碼以及對應的驗證頁面，前端在全局請求中監測該錯誤碼，在檢測到錯誤碼后通過插件加載驗證頁面讓用戶去驗證，并將驗證結果反饋給后端，在后端收到驗證結果后移除驗證頁面。
需求確定后，我們就知道這個插件需要做的事情就是創建一個vue組件實例=>加載后端返回的頁面=>解析并執行其中的js文件=>注冊驗證成功的全局回調函數。具體操作如下：
const antiReptilian = {
install(Vue, options) {
Vue.$antirept = checkText => {
if (!checkText) return;
let wrapperTemp = Vue.extend({
// 1、創建構造器，定義模板
template:
'<div id="antiReptWrapper" ></div>'
});
let antiObj = new wrapperTemp().$mount().$el; // 2、創建實例
antiObj.innerHTML = checkText;
initScripts(antiObj);//3、解析并順序執行js
let App = document.getElementById('app');
let wrapper = document.getElementById('antiReptWrapper');
if (wrapper) {
return;
}
App.appendChild(antiObj); // 4、把創建的實例添加到App中
window.checkSucceed = res => {
// 5、驗證通過后移除實例
App.removeChild(antiObj);
window.location.reload();
};
};
}
};需要注意的是通過設置innerHTML 的方式加載驗證頁面會導致內部的js文件不執行；因此我們還必須將驗證頁面的的js文件提取出來再重新插入，并且還要保證內部多個js文件的執行順序，具體代碼如下：
//重新引入js文件
const initScripts = function(cont) {
let oldScripts = cont.getElementsByTagName('script');
let newScripts = [];
for (let i = 0; i < oldScripts.length; 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文件按照之前的順序執行
newScripts[i - 1].onload = newScripts[
i - 1
].onreadystatechange = function(event) {
cont.appendChild(newScripts[i]);
};
}
}
};到此為止這個簡單的插件功能就完成了，在需要的地方引入、注冊并調用Vue.$antirept()方法傳入要加載的頁面即可；
將寫好的插件生成npm包的方法也簡單，分為以下幾步：
1、前往npm官網注冊一個npm賬號=>【npm官網】;
2、將寫好的插件生成一個簡單的npm包：
3、發布創建好的包：
1. 若第一次發布包，執行‘ npm adduser'命令，輸入前面注冊好的npm賬號，密碼和郵箱；
2. 若不是第一次發布包，執行‘ npm login'命令進行登錄，同樣輸入npm賬號，密碼和郵箱；
3. 登錄成功以后，在剛才的文件夾下，執行‘npm publish'命令，即可發布該npm包；
4. 若要更新之前的包，只需要更改版本號，再執行‘npm publish'命令即可；
至此一個簡單的vue插件就生成了一個npm包了，以后使用就不需要加載js文件，可以直接通過npm的方式引入了，其它的小伙伴也可以一起愉快的玩耍了==>全劇終。
關于Vue插件如何構建并生成npm包就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
