17. Plugins（插件）

Plugins

编写一个插件

插件通常用于为 Vue 添加全局级别的功能。插件范围没有的严格定义 - 通常有几种类型的插件可以编写：

1. 添加一些全局方法或属性。例如 vue-custom-element

添加一个或多个全局资源(asset)：指令(directives)/过滤器(filters)/过渡(transitions) 等。例如 vue-touch

3. 全局混合添加一些组件选项。例如vue-router

4. 通过将Vue实例方法附加到Vue.prototype来添加一些Vue实例方法。

5. 提供自己的API的库，同时注入上述的一些组合。例如vue-router

Vue.js插件应该公开一个install方法。该方法将以Vue构造函数作为第一个参数以及可能的选项进行调用：

MyPlugin.install = function (Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // something logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin{
    created: function () {
      // something logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // something logic ...
  }
}

使用插件

通过调用Vue.use()全局方法来使用插件：

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

您可以选择传递一些选项：

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

Vue.use 会自动阻止你多次使用同一个插件，所以在同一个插件上多次调用它只会安装一次插件。

Vue.js官方插件提供的一些插件，如vue-router自动调用Vue.use()是否 Vue可用作全局变量。但是在像CommonJS这样的模块环境中，你总是需要Vue.use()明确地调用：

// When using CommonJS via Browserify or Webpack
var Vue = require('vue')
var VueRouter = require('vue-router')

// Don't forget to call this
Vue.use(VueRouter)

Checkout awesome-vue为大量社区贡献的插件和库提供支持。