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 ...
    }
}