vue外掛介紹

1. 外掛與元件

在講解外掛之前，我們首先來了解下vue外掛和元件的關係，在我們的vue專案中我們使用元件的頻率往往會大於外掛，關係如下圖所示

2. 外掛前置工作

　　1. 外掛內 component 需要帶name屬性， 例如

export default {
  name: 'test-panel',   // 這裡需要注意下，我們是採用的全域性注入我們的元件，所以在後面因為我們的元件後，會直接使用這個命名的標籤
  data () {
    return {
      checkedNumber: ''
    }
  },
｝

2.打包的專案清單配置檔案：

修改webpack.config.js的打包名稱

3. 外掛分類

vue外掛的編寫方法一般分為4類，如上圖所示。主要註冊與繫結機制如下：

export default {
    install(Vue, options) {
        Vue.myGlobalMethod = function () {  // 1. 新增全域性方法或屬性，如:  vue-custom-element
            // 邏輯...
        }

        Vue.directive('my-directive', {  // 2. 新增全域性資源：指令/過濾器/過渡等，如 vue-touch
 

            bind (el, binding, vnode, oldVnode) {
                // 邏輯...
            }
            ...
        })

        Vue.mixin({
            created: function () {  // 3. 通過全域性 mixin方法新增一些元件選項，如: vuex
                // 邏輯...
            }
            ...
        })    

        Vue.prototype.$myMethod 
 
= function (options) {  // 4. 新增例項方法，通過把它們新增到 Vue.prototype 上實現
            // 邏輯...
        }
    }
}

上方程式碼使用了es6部分語法列出了4種編寫外掛的方法，而install是註冊外掛主要呼叫的方法，包含了兩個引數（Vue例項和自定義配置屬性options），我們可以將以上程式碼儲存到plugins.js中。

4. 外掛使用

在plugins.js中我們僅僅編寫了一個外掛的空殼子，假如現在需要全域性註冊該外掛，我們可以在入口檔案，比如main.js中註冊：

...

import Vue from 'vue'
import MyPlugin from './plugins/plugins.js'

Vue.use(MyPlugin);

...

通過全域性方法 Vue.use() 即可使用該外掛，其自動會呼叫install方法。Vue.use會自動阻止註冊相同外掛多次，屆時只會註冊一次該外掛。

vue外掛編寫方法

上述我們提到了編寫外掛的4種方法，接下來我們對其一一進行講解：

1. 新增全域性方法或屬性

export default {
    install(Vue, options) {
        Vue.$myName = '勞卜';
    }
}

在install方法中，我們直接在Vue例項上聲明瞭$myName屬性並進行了賦值，當該外掛註冊後只要存在Vue例項的地方你都可以獲取到Vue.$myName的值，因為其直接繫結在了Vue例項上。

2. 新增全域性資源

export default {
    install(Vue, options) {
        Vue.directive('focus', {
            bind: function() {},

            // 當繫結元素插入到 DOM 中。
            inserted: function(el, binding, vnode, oldVnode) {

                // 聚焦元素
                el.focus();
            },

            update: function() {},
            componentUpdated: function() {},
            unbind: function() {}
        });
    },
}

新增全域性資源包含了新增全域性的指令／過濾器／過渡等，上方程式碼我們通過Vue.directive()添加了一個全域性指令v-focus，其主要包含了5種方法，其中inserted代表當繫結元素插入到 DOM 中執行，而el.focus()代表聚焦繫結的元素，這樣如果我們在一個input輸入框上繫結該指令就會自動進行focus聚焦。

其他directive提供的方法及用途可以參考：vue自定義指令

3. 新增全域性mixin方法

export default {
    install(Vue, options) {
        Vue.mixin({
            methods: {
                greetingFn() {
                    console.log('greeting');
                }
            }
        });
    },
}

mixin代表混合的意思，我們可以全域性註冊一個混合，其會影響註冊之後建立的每個 Vue 例項，上方程式碼註冊後會在每個元件例項中新增greetingFn方法，在單檔案元件中可以直接通過this.greetingFn()呼叫。當然如果例項中存在同名方法，則mixin方法中建立的會被覆蓋，同時mixin物件中的鉤子將在元件自身鉤子之前呼叫。

4. 新增例項方法

export default {
    install(Vue, options) {
        Vue.prototype.$myName = '勞卜';
        Vue.prototype.showMyName = value => {
            console.log(value);
        };
    },
}

新增例項方法是最常用的一種方法，其直接繫結在vue的原型鏈上，我們可以回想一下 JS 裡的類的概念。例項方法可以在元件內部，通過this.$myMethod來呼叫。

5. 外掛封裝元件

上方4點只講解了外掛自身的4中編寫方法，並沒有涉及元件的內容，如果我們要在元件的基礎上編寫外掛，我們可以使用Vue.extend(component)來進行，可以見下方loading外掛例項。

loading外掛

<!-- loading.vue元件 -->
<template>
    <div class="loading-box" v-show="show">
        <div class="loading-mask"></div>
        <div class="loading-content">
            <div class="animate">
            </div>
            <div class="text">{{text}}</div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        show: Boolean,
        text: {
          type: String,
          default: '正在載入中...'
        },
    }
}
</script>

以上是一個loading.vue元件，省略了樣式部分，在沒有封裝外掛之前，我們只能通過import引入並註冊到components物件中才能在頁面中使用

下面我們便來封裝一下該元件

// loading.js
import LoadingComponent from '../components/loading.vue'

let $vm

export default {
    install(Vue, options) {
        if (!$vm) {
            const LoadingPlugin = Vue.extend(LoadingComponent);

            $vm = new LoadingPlugin({
                el: document.createElement('div')
            });

            document.body.appendChild($vm.$el);
        }

        $vm.show = false;

        let loading = {
            show(text) {
                $vm.show = true;

                $vm.text = text;
            },
            hide() {
                $vm.show = false;
            }
        };

        if (!Vue.$loading) {
            Vue.$loading = loading;
        }

        // Vue.prototype.$loading = Vue.$loading;

        Vue.mixin({
            created() {
                this.$loading = Vue.$loading;
            }
        })
    }
}

以上我們新建一個loading.js檔案，引入我們的loading.vue元件，然後通過Vue.extend()方法建立了一個構造器LoadingPlugin，其次我們再通過new LoadingPlugin()建立了$vm例項，並掛載到一個div元素上。最後我們需要通過document.body.appendChild($vm.$el)將其插入到DOM節點中。

當我們建立了$vm例項後，我們可以訪問該例項的屬性和方法，比如通過$vm.show就可以改變loading元件的show值來控制其顯示隱藏。

最終我們通過Vue.mixin或者Vue.prototype.$loading來全域性添加了$loading事件，其又包含了show和hide兩個方法。我們可以直接在頁面中使用this.$loading.show()來顯示載入，使用this.$loading.hide()來關閉載入。

外掛釋出

外掛編寫完後我們的目的除了本地引用註冊外，可能更希望釋出到線上供他人或其他專案使用，因此我們需要了解外掛釋出的方法。

1. 釋出準備

在釋出外掛前你需要一個npm賬號，你可以訪問：https://www.npmjs.com/進行註冊

2. 釋出命令

npm login
cd 目錄
npm publish