可能你覺得寫一個Vue.js插件很難，但實際上比你想象的要簡單得多。本文內容：
- 創建了你的第一個VueJS插件
- 它們如何工作的概述
- 學習了所有的工具來構建更復雜的插件
讓我們開始吧！
1.如何設置插件
從廣義上講，我們的插件只是一個公開 install 方法的Javascript模塊。該方法有兩個參數
- Vue構造函數
- 選項的對象
在我們的Vue項目中，在 src/plugins 中創建一個新文件夾。
然後，在新文件夾中，我們實際上可以創建我們的插件文件。在本教程中，我將其命名為 first-plugin.js。
在我們的新插件文件中，我們應該遵循典型的ES6模塊模式，也就是整個 export default，這使我們能夠從其文件中導出插件，並允許其他文件導入它。
接下來，就像我們之前討論的那樣，我們的插件必須公開 install(Vue, options) 方法。這是安裝插件時Vue實際調用的。
因此，現在 first-plugin.js 的代碼應該是這樣的：
<code>export default {
// 被Vue.use(FirstPlugin)
install(Vue, options) {
}
}/<code> 現在，讓我們實際在此代碼中添加一些內容。
既然我們已經建立了插件的框架，我們就可以開始構建它了。我們可以使用幾種不同的選項來添加功能，目前，我們只介紹一種簡單快捷的方法（不用擔心，稍後我將介紹更高級的技術）。
2.向插件添加功能
2.1構建你的第一個插件
一種查看我們的插件運行情況的簡單方法是創建一個全局mixin，它將包含在所有Vue實例中。使用 Vue.mixin 函數可以做到這一點。
本質上，它們使您可以注入其他組件選項，它們是提取和重用組件之間通用功能的好方法，Mixins還允許您的插件訪問Vue生命週期鉤子。
要將mixin添加到插件，我們在 Vue.mixin 函數內聲明其他組件選項。首先，我剛剛添加了一個帶有 console.log 語句的生命週期鉤子。
現在，我們的插件代碼應如下所示。
<code>// first-plugin.js
export default {
// 調用 Vue.use(FirstPlugin)
install(Vue, options) {
// 創建一個 mixin
Vue.mixin({
created() {
console.log(Vue);
}
});
}
}/<code>2.2安裝插件
如果您現在要運行項目，則會注意到沒有任何變化，那是因為我們尚未安裝插件。
幸運的是，這是一個非常簡單的過程。在 src/main.js 文件中，即聲明我們的Vue構造函數的文件中，我們只需導入並安裝插件文件即可。
<code>// main.js import FirstPlugin from "./plugins/first-plugin.js"; Vue.use(FirstPlugin);/<code>
Vue.use 的一大優點是可以確保您的插件僅安裝一次。如果你不小心添加了兩次，它會減慢你的應用程序，可能還會搞砸一些功能。
最後，我們已經安裝了插件。現在，如果我們運行項目並檢查日誌，我們應該在控制檯中看到一些輸出。
console.log（Vue）的輸出
你已正式創建了第一個插件，但這實際上並沒有做任何有用的事情。讓我們來看看一些讓插件發揮功能的簡潔方法。
2.3聲明全局屬性
全局數據/方法是一種向代碼添加普遍功能的有用方法，這也非常容易做到。假設我們希望我們的應用程序的當前版本為全局屬性，會是這樣的：
<code>// first-plugin.js
install(Vue, options) {
// 定義全局順序
Vue.VERSION = 'v2.0.3';
}/<code>要注意的一件事是過度使用全局變量，很容易將全局範圍擠得太滿，使其難以使用。
2.4定義實例屬性
這是我最喜歡的添加插件的方法之一，實例屬性是將數據和方法添加到Vue項目的便捷方法，我更喜歡使用實例屬性，以保持全局範圍的整潔和易於理解。
在此示例中，我剛剛創建了一個實例方法，該方法將一個字符串放在 標記內。
注意：$ 不是必需的語法;這只是Vue用於實例屬性以避免衝突的命名約定。
<code>// first-plugin.js
// 定義實例屬性
Vue.prototype.$italicHTML = function (text) {
return '' + text + '';
}/<code> 然後，我們可以在任何這樣的實例中使用它
<code>// Component.vue /<code>
2.5建立全局過濾器
過濾器是我最喜歡的技術之一，因為它們使文本轉換變得很容易。同樣，我們所要做的就是調用Vue構造函數方法Vue。在我們的整個Vue項目中，我們有一個可重複使用的全局過濾器。
假設我們要使用過濾器來根據較長的文本生成預覽代碼段，我們在插件中這個事情。
<code>// first-plugin.js
// 建立全局過濾器
Vue.filter('preview', (value) => {
if (!value) {
return '';
}
return value.substring(0, userOptions.cutoff) + '...';
})/<code>2.6添加自定義指令
自定義指令 是對特定元素進行底層DOM訪問的好方法。
查看VueJS文檔中的示例，讓我們在插件內部創建一個自定義指令，該指令可自動將元素聚焦在頁面上。
在install方法內部，我們只需要使用 Vue.directive 方法來聲明我們的新指令。
<code>// first-plugin.js
// 添加自定義指令
Vue.directive('focus', {
// 當綁定元素被插入到DOM中時…
inserted: function (el) {
el.focus();
}
})/<code> 然後，我們可以把它加到一個元素上。這是我們自動將文本輸入聚焦在頁面加載上的方式。
<code>// Component.vue /<code>
2.7合併選項對象
至此，我們還沒有涉及install方法的第二個參數，此方法使你的插件在不同情況下更加靈活。
為了使用 options 對象，我們首先必須向我們的插件傳遞一些選項。
使用 options 對象時，一種最佳實踐是創建一些默認值。為此，我們可以在插件文件中私下定義默認選項對象，然後使用Javascript的擴展語法將默認選項與參數選項合併，從而實現這一點。
回顧前面的示例，假設我們希望添加一個選項來設置文本預覽的截止點。大概是這樣的：
<code>// first-plugin.js
const defaultOptions = {
cutoff: 50
};
export default {
install(Vue, options) {
// 合併默認選項與arg選項
let userOptions = {...defaultOptions, ...options};
// 剩餘插件代碼
}
}/<code>現在，即使沒有任何選項傳遞給插件，它仍將使用默認值運行。
使用options對象時，一種最佳實踐是創建一些默認值。
如果我們確實想傳遞選項，那很簡單。在 src/main.js 文件中，我們要做的就是在 Vue.use 方法中添加第二個參數。此參數將是一個選項對象。
<code>// main.js
Vue.use(FirstPlugin, { cutoff: 100 });/<code>因為我們將參數選項放在擴展語法的右側，所以它會覆蓋默認值。
最後
在實現這些技術之後，這是我們最終的插件代碼。
<code>// first-plugin.js
const defaultOptions = {
cutoff: 50
};
export default {
// 被Vue.use(FirstPlugin)
install(Vue, options) {
let userOptions = { ...defaultOptions, ...options };
// create a mixin
Vue.mixin({
created() {
console.log(Vue);
}
});
// 定義全局屬性
Vue.VERSION = "v2.0.3";
Vue.prototype.$italicHTML = function(text) {
return "" + text + "";
};
// 建立全局過濾器
Vue.filter("preview", value => {
if (!value) {
return "";
}
return value.substring(0, userOptions.cutoff) + "...";
});
// 添加自定義指令
Vue.directive("focus", {
// 當綁定元素被插入到DOM中時…
inserted: function(el) {
el.focus();
}
});
}
};/<code>就功能而言，此插件絕對遍地都是。但是，如果你遵循了本文的內容，那麼你現在已經熟悉了構建更高級插件所需的大多數工具、方法和技術。
本文完整代碼獲取：私信“vue-plugin-1”即可獲取。
如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。
私信回覆：大禮包，送某網精品視頻課程網盤資料，準能為你節省不少錢！
