Vue 并没有特别的插件机制,官方文档非常简练:
https://vuejs.org/v2/guide/plugins.html
官方建议了五种为 Vue 添加插件的方式,后面有这些方式的例子:
- Add some global methods or properties. e.g. vue-custom-element
- Add one or more global assets: directives/filters/transitions etc. e.g. vue-touch
- Add some component options by global mixin. e.g. vuex
- Add some Vue instance methods by attaching them to Vue.prototype.
- 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