vue 插件的方法代碼詳解

發(fā)布時(shí)間：2020-09-07 17:55:05 來(lái)源：腳本之家閱讀：152 作者：Lastingman 欄目：web開(kāi)發(fā)

在開(kāi)發(fā)項(xiàng)目的時(shí)候，我們一般都用 vue-cli 來(lái)避免繁瑣的 webpack 配置和 template 配置。但是官方 cli3 現(xiàn)在并不支持搭建 plugin 開(kāi)發(fā)的項(xiàng)目。

還好，已經(jīng)有大神（Kazupon）走在了我們前面，我們就用現(xiàn)成的 vue-cli-plugin-p11n 。

如果你沒(méi)有安裝 vue-cli，請(qǐng)先安裝

npm i -g @vue/cli

首先，搭建項(xiàng)目

vue create [your plugin name] && cd [your plugin name]
vue add p11n

這樣我們就有了一個(gè)初始化的插件開(kāi)發(fā)環(huán)境。

install 方法

開(kāi)發(fā) vue 插件其實(shí)就是寫(xiě)一個(gè) install 方法，然后把這個(gè)方法暴露出來(lái)給你的用戶，他們就可以用 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 配置，只需要自己填寫(xiě)好 name，author，license，repository，description，keywords 這幾個(gè)選項(xiàng)就可以了。

# login npm
npm login
# patch version
npm version patch
# publish
npm publish --access public

我自己寫(xiě)了一個(gè)非常簡(jiǎn)單的插件 vue-chart ，可以作為參考。

總結(jié)

以上所述是小編給大家介紹的vue 插件的方法代碼詳解,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

向AI問(wèn)一下細(xì)節(jié)

vue 插件的方法代碼詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽