学习笔记《Vue 的插件机制》

Vue 并没有特别的插件机制，官方文档非常简练：
https://vuejs.org/v2/guide/plugins.html

官方建议了五种为 Vue 添加插件的方式，后面有这些方式的例子：

1. Add some global methods or properties. e.g. vue-custom-element
2. Add one or more global assets: directives/filters/transitions etc. e.g. vue-touch
3. Add some component options by global mixin. e.g. vuex
4. Add some Vue instance methods by attaching them to Vue.prototype.
5. A library that provides an API of its own, while at the same time injecting some combination of the above. e.g. vue-router

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 (options) {
    // something logic ...
  }
}

其中第三点中的 global mixin 是 Vue 本身的一种混入机制（类似多重继承），可以混入方法（methods），组件（components），模板指令（directives）等等

参照前面的例子，Vue 的插件是必须有 install() 方法的，之后就可以使用 Vue.use() 的方式调用：

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

这是一个 Vue 的插件列表（并不完全）：
https://github.com/vuejs/awesome-vue#components--libraries