可能你覺得寫一個Vue.js插件很難,但實際上比你想象的要簡單得多。本文內容:
讓我們開始吧!
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前端工程師,全棧開發工程師、持續學習者。
私信回覆:大禮包,送某網精品視頻課程網盤資料,準能為你節省不少錢!
#科技青年# #423頭條知識節#