在開發項目的時候，我們一般都用 vue-cli 來避免繁瑣的 webpack 配置和 template 配置。但是官方 cli3 現在并不支持搭建 plugin 開發的項目。

還好，已經有大神（Kazupon）走在了我們前面，我們就用現成的 vue-cli-plugin-p11n 。

如果你沒有安裝 vue-cli，請先安裝

npm i -g @vue/cli

首先，搭建項目

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

這樣我們就有了一個初始化的插件開發環境。

install 方法

開發 vue 插件其實就是寫一個 install 方法，然后把這個方法暴露出來給你的用戶，他們就可以用 Vue.use(plugin) 載入插件了。

借用 vue 官方 API 上的解釋： 如果插件是一個對象，必須提供 install 方法。如果插件是一個函數，它會被作為 install 方法。install 方法調用時，會將 Vue 作為參數傳入。 該方法需要在調用 new Vue() 之前被調用。 當 install 方法被同一個插件多次調用，插件將只會被安裝一次。

export const install = function (Vue, options) { // Vue 就是 vue 實例 // options 就是 Vue.use(plugin，options) 傳入的第二個參數 options // 1. 添加全局方法或屬性 Vue.myGlobalMethod = function () {  // 邏輯... } // 2. 添加全局資源 Vue.directive('my-directive', {  bind (el, binding, vnode, oldVnode) {   // 邏輯...  }  ... }) // 3. 注入組件選項 Vue.mixin({  created: function () {   // 邏輯...  }  ... }) // 4. 添加實例方法 Vue.prototype.$myMethod = function (methodOptions) {  // 邏輯... }}

發布插件

p11n 已經幫助我們部署好了大部分 package.json 配置，只需要自己填寫好 name，author，license，repository，description，keywords 這幾個選項就可以了。

# login npmnpm login# patch versionnpm version patch# publishnpm publish --access public

我自己寫了一個非常簡單的插件 vue-chart ，可以作為參考。

總結

以上所述是小編給大家介紹的vue 插件的方法代碼詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！