插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制。
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)new Vue({// ...组件选项
})

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

• 可以在插件中编写全局过滤器
• 可以在插件中添加全局指令
• 可以在插件中配置全局混入对象
• 可以在插件中添加实例方法

对象.install = function (Vue, options) {// 1. 添加全局过滤器Vue.filter(....)// 2. 添加全局指令Vue.directive(....)// 3. 配置全局混入(合)Vue.mixin(....)// 4. 添加实例方法Vue.prototype.$myMethod = function () {...}Vue.prototype.$myProperty = xxxx
}

案例

plugin.js（编写的插件实现功能）

export default {install(Vue, x, y, z) {console.log(x, y, z)//全局过滤器Vue.filter('mySlice', function (value) {return value.slice(0, 4)})//定义全局指令Vue.directive('fbind', {//指令与元素成功绑定时（一上来）bind(element, binding) {element.value = binding.value},//指令所在元素被插入页面时inserted(element, binding) {element.focus()},//指令所在的模板被重新解析时update(element, binding) {element.value = binding.value}})//定义混入Vue.mixin({data() {return {x: 100,y: 200}},})//给Vue原型上添加一个方法（vm和vc就都能用了）Vue.prototype.hello = () => { alert('你好啊aaaa') }}
}

main.js

// 引入插件
import plugin from ‘./plugin’

// 使用插件
Vue.use(plugin)

引入之后就可以使用插件的功能