Vue | 23 可用性&組合 - 插件

內容提要：

1. 使用一個插件
2. 如何寫一個插件

插件常常爲Vue添加全局級功能。插件沒有嚴格定義的作用域 - 通常有幾種類型的插件：

1. 添加一些全局的方法或屬性。例如： vue-custom-element
2. 添加一個或多個全局資源：指令/過濾器/過渡 等等. 例如：vue-touch
3. 通過全局mixin添加一些全局組件項。例如。vue-router
4. 添加一些Vue實例方法，通過把他們添加到Vue.prototype上實現。
5. 一個提供自有API的庫，同時注入上面提到的一些功能的組合。例如：vue-router

使用一個插件

通過調用Vue.use()全局方法使用插件。做這個之前你需要通過new Vue()啓動你的應用。

// calls 'MyPlugin.install(Vue)'
Vue.use(MyPlugin)

new Vue({
    // ... options
})

你也可以傳入一些選項對象：

Vue.use(MyPlugin, { someOption：true })

Vue.use會自動阻止你使用相同的組件註冊多次，所以當你調用相同的組件多次的時候只會安裝一次。

如果Vue作爲一個全局變量是可用的，那麼通過Vue.js官方提供的插件將自動調用Vue.use(),例如vue-router,然而，例如在CommonJS的模塊環境中，你總是需要顯式的調用Vue.use():

// 當你通過Browserify 或 Webpack 使用CommonJS
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘記調用這個
Vue.use(VueRouter)

awesome-vue收集類大量社區貢獻的插件和庫。

寫一個插件

一個Vue.js 插件應該提供一個install方法。這個方法的第一個參數是Vue的構造器。連同其他可能的操作：

MyPlugin.install = function (Vue, options) {
    // 1.增加一個全局方法或屬性
    Vue.myGlobalMehtod = function () {
        // 一些邏輯...
    }
    
    // 添加一個全局資源
    Vue.directive('my-directive', {
        bind (el, binding, vnode, oldValue) {
            // 一些邏輯...
        }
    })
    
    // 3. 注入一些組件選項對象
    Vue.mixin({
        created: function () {
            // some logic ...
        }
        ...
    })
    
    // 4.添加一個實例方法
    Vue.prototype.$myMethod = function (methodOptions) {
        // some logic ...
    }
}