1. vue 官方文档 cn.vuejs.org/v2/guide/pl…
开源插件库 https://github.com/vuejs/awesome-vue
插件通常用来为vue添加全局功能，是对Vue的功能的增强和补充。
插件的功能范围没有严格的限制，一般有下面几种：
- 1. 添加全局方法或属性
- 2. 添加全局资源： 指令 / 过滤器 / 过渡等。
- 3. 通过全局混入来添加一些组件选项
- 4. 添加vue实例方法，通过把它们添加到Vue.prototype上实现。
- 5. 一个库，提供自己的API，同时提供上面提到的一个或多个功能
2. 开发插件
Vue.js的插件应该暴露一个install方法，这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象。
官网代码参考：
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}3. 插件的使用
可以通过全局方法Vue.use()来全局注册使用插件，他需要在你调用new Vue()启动应用之前完成。
...
import Vue from 'vue'
import MyPlugin from './plugins/plugins.js'
// 通过全局方法Vue.use()即可使用该插件，它自动会调用install方法
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
new Vue({
// ...组件选项
})也可以传入一个可选的选项对象
Vue.use(MyPlugin, { someOption: true })Vue.use会自动阻止注册相同插件多次，届时只会注册一次该插件。
4.vue 插件编写方法
- 1. 添加全局方法或属性
var behaviourPlugin = {}
behaviourPlugin.install = function(Vue, options) {
Vue.$myData = '小小'
}
export default behaviourPlugin在install方法中，我们直接在Vue实例上声明了$myData属性并进行了赋值，当该插件注册后，只要存在Vue实例的地方都可以获取到Vue.$myData的值，因为我们直接绑定在了Vue实例上
- 2. 添加全局资源
export default {
install(Vue, options) {
Vue.directive('focus', {
bind: function() {},
// 当绑定元素插入到 DOM 中。
inserted: function(el, binding, vnode, oldVnode) {
// 聚焦元素
el.focus();
},
update: function() {},
componentUpdated: function() {},
unbind: function() {}
});
},
}添加全局资源包含了添加全局的指令 / 过滤器 / 过渡 等，上方代码我们通过Vue.directive()添加了一个全局指令v-focus，其主要包含了5种方法，其中inserted代表当绑定元素插入到 DOM 中执行，而el.focus()代表聚焦绑定的元素，这样如果我们在一个input输入框上绑定该指令就会自动进行focus聚焦。
vue自定义指令 ： cn.vuejs.org/v2/guide/cu…
3. 添加全局mixin方法
export default {
install(Vue, options) {
Vue.mixin({
methods: {
greetingFn() {
console.log('greeting');
}
}
});
},我们可以全局注册一个混合，它会影响注册之后创建的每一个实例，注册后会在每个组件实例中添加greetingFn 方法。
4. 添加实例方法
export default {
install(Vue, options) {
Vue.prototype.$myName = '劳卜';
Vue.prototype.showMyName = value => {
console.log(value);
};
},
}添加实例方法是最常用的一种方法，其直接绑定在vue的原型链上，实例方法可以在组件内部，通过this.$myMethods来调用
