快捷導(dǎo)航

vue 插件的方法代碼詳解

更新時(shí)間：2019年06月06日 10:48:54 作者：Lastingman

在開發(fā)項(xiàng)目的時(shí)候，我們一般都用 vue-cli 來避免繁瑣的 webpack 配置和 template 配置。這篇文章主要介紹了如何寫一個(gè) 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è)非常簡(jiǎn)單的插件 vue-chart ，可以作為參考。

總結(jié)

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

您可能感興趣的文章: