搭建本身的 vue 組件庫（一） —— vue 插件開發基礎知識

插件開發

(來自官網 vue 插件開發)VUE 大部分的插件都是在爲 vue 添加全局的功能，這些添加全局的方法無外乎下面的幾種方式:

1. 添加全局方法或者屬性：

Vue.uiname = 'star-ui-vue'

// 在項目中，能夠經過 Vue.uiname 拿到 uiname 的值
複製代碼

2. 添加全局資源: 指令/過濾器/過渡
3. 經過全局 mixin 方法添加一些組件選項
4. 添加 vue 實例方法。經過把他們添加到 vue.prototype 實現 咱們在使用 script 引入 vue 的時候一般先 new 一個 vue 的實例，這是由於 vue 自己是一個對象，他爲咱們提供了像 $set 這樣的全局方法，因此在製做 vue 插件的時候，咱們能夠仿照這種方式，給 vue 的 prototype 添加全局的屬性或者方法。
5. 經過提供上述的一個或者多個插件的實現方法，實現一個庫。

插件封裝

vue 的插件應該有一個公開的 install 方法。 這個方法的第一個參數是 Vue 構造器， 第二個參數是一個可選的對象。

const MyPlugin = {
    install (Vue,options) {
        // 1. 添加全局屬性或方法
        Vue.pluginName = 'MyPlugin'
        Vue.pluginMethods = () => {
            console.log('self methods')
        }

        //2. 添加全局資源
        Vue.directive('my-directive',{
            bind(el,binding,vnode){...}
        })
        Vue.filter('my-filter',(val) => '$' + val)

        // 3. 全局 mixin 注入
        Vue.mixin({
            created(){
                console.log('mixin')
            },
            data(){
                return {
                    initData: 'init data'
                }
            }
        })

        // 4. 添加實例方法或者屬性
        Vue.prototype.$myMethod = (option) => {
            console.log('my method')
        }
    }
}
複製代碼

使用插件

經過全局方法 Vue.use() 使用插件

// main.js
import Vue from 'Vue'
import MyPlugin from 'myPlugin'

Vue.use(MyPlugin)

// 1. 查看全局 屬性 或者調用全局的方法
console.log(Vue.pluginName)   // 'MyPlugin'
Vue.pluginMethods()    // 'self methods'

...

複製代碼

// App.vue

// 2. 調用全局資源
<button my-directive></button>	

// 3. 全局 mixin 注入時 定義的 data 或者方法 將會 合併 在全部的 vue 組件中 

// 4. 添加實例方法或者屬性

methods:{
    test(){
        this.$myMethod()   // 'my method'
    }
}


複製代碼

屢次註冊

Vue.use 會自動阻止屢次註冊相同插件，屆時只會註冊一次該插件。

實現方式

export function initUse(Vue:GlobalAPI){
    Vue.use function (plugin: Function | object) {
        // 先拿到當前已經註冊的全部組件 不存在的話就建立
        const installedPlugins = (this._initlledPlugins || this.installedPlugins = [])

        // 判斷該組件是否建立，若是建立就直接返回
        if(installedPlugins.indexOf(plugin) > -1) {
            return this
        }
        ...
    }
}

複製代碼