vue 插件的方法代碼詳解
在開發(fā)項(xiàng)目的時(shí)候，我們一般都用 vue-cli 來避免繁瑣的 webpack 配置和 template 配置。但是官方 cli3 現(xiàn)在并不支持搭建 plugin 開發(fā)的項(xiàng)目。
還好，已經(jīng)有大神（Kazupon）走在了我們前面，我們就用現(xiàn)成的 vue-cli-plugin-p11n 。
如果你沒有安裝 vue-cli，請(qǐng)先安裝
npm i -g @vue/cli
首先，搭建項(xiàng)目
vue create [your plugin name] && cd [your plugin name] vue add p11n
這樣我們就有了一個(gè)初始化的插件開發(fā)環(huán)境。
install 方法
開發(fā) vue 插件其實(shí)就是寫一個(gè) install 方法，然后把這個(gè)方法暴露出來給你的用戶，他們就可以用 Vue.use(plugin) 載入插件了。
借用 vue 官方 API 上的解釋： 如果插件是一個(gè)對(duì)象，必須提供 install 方法。如果插件是一個(gè)函數(shù)，它會(huì)被作為 install 方法。install 方法調(diào)用時(shí)，會(huì)將 Vue 作為參數(shù)傳入。 該方法需要在調(diào)用 new Vue() 之前被調(diào)用。 當(dāng) install 方法被同一個(gè)插件多次調(diào)用，插件將只會(huì)被安裝一次。
export const install = function (Vue, options) {
// Vue 就是 vue 實(shí)例
// options 就是 Vue.use(plugin，options) 傳入的第二個(gè)參數(shù) options
// 1. 添加全局方法或?qū)傩?
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3. 注入組件選項(xiàng)
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 4. 添加實(shí)例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
}
發(fā)布插件
p11n 已經(jīng)幫助我們部署好了大部分 package.json 配置，只需要自己填寫好 name，author，license，repository，description，keywords 這幾個(gè)選項(xiàng)就可以了。
# login npm npm login # patch version npm version patch # publish npm publish --access public
我自己寫了一個(gè)非常簡單的插件 vue-chart ，可以作為參考。
總結(jié)
以上所述是小編給大家介紹的vue 插件的方法代碼詳解,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue中axios請(qǐng)求的封裝，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue.prototype和vue.use的區(qū)別和注意點(diǎn)小結(jié)
這篇文章主要介紹了vue.prototype和vue.use的區(qū)別和注意點(diǎn)小結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了如何解決el-checkbox選中狀態(tài)更改問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue配置文件中的proxy配置方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存
這篇文章主要介紹了有關(guān)vue 組件切換,動(dòng)態(tài)組件,組件緩存，在組件化開發(fā)模式下，我們會(huì)把整個(gè)項(xiàng)目拆分成很多組件，然后按照合理的方式組織起來,達(dá)到預(yù)期效果，下面來看看文章的詳細(xì)內(nèi)容2021-11-11
今天在寫項(xiàng)目掉接口的時(shí)候有一個(gè)接口需要到了用戶的ip地址,查了半天覺得這個(gè)方法不錯(cuò),下面這篇文章主要給大家介紹了關(guān)于vue前端通過騰訊接口獲取用戶ip的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue Ajax跨域請(qǐng)求實(shí)例詳解,需要的朋友可以參考下2017-06-06
我們都知道,輪播圖組件模板結(jié)構(gòu)通常是ul包裹li的結(jié)構(gòu),在vue中,li的數(shù)量也通常是由后端接口返回的數(shù)據(jù)決定,下面這篇文章主要給大家介紹了關(guān)于vue3封裝輪播圖組件功能的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue中"This dependency was not found"問題的解決方法
這篇文章主要介紹了Vue中"This dependency was not found"的問題的解決方法,需要的朋友可以參考下2018-06-06
key屬性是一個(gè)特殊的屬性，用于標(biāo)識(shí)每個(gè)節(jié)點(diǎn)的唯一性。在Vue2.x版本中的key和Vue3.x版本中的key有很大的不同，那么在這篇文章中，我們將會(huì)討論Vue2中的key和Vue3中的key的區(qū)別2023-04-04