浅谈Vue.use到底是什么鬼
我们在使用Vue做项目开发的时候，看到不少轮子都是通过Vue.use来进行使用，感觉甚是高大上。
不过Vue.use到底是什么鬼？不妨来看个究竟。
其实这些轮子都可以称之为插件，它的功能范围没有严格的限制，一般包含如下几种：
- 添加全局方法或者属性。如:vue-custom-element
- 添加全局资源：指令/过滤器/过渡/组件等。如vue-touch
- 通过全局混入来添加一些组件选项。如vue-router
- 添加Vue实例方法，通过把它们添加到Vue.prototype上实现。
- 一个库，提供自己的API，同时提供上面提到的一个或多个功能。如vue-router
无论大小，插件要实现的功能无非就是上述这几种。但是，这并不妨碍我们创造出复杂的插件，不过我们还是希望给用户提供一个简单的使用方法，他不需要关注插件内部做了些什么。固Vue提供了use方法，专门来在newVue()之前使用插件。
不管是官方提供的插件（例如vue-router、vuex），还是第三方的插件（例如ElementUI、ant）都是采用了此方式，不外乎插件内部的功能不同而已。当然，还有其他诸多此类插件，awesome-vue就集合了大量由社区贡献的插件和库。
接下来，我们就来看下这个神秘的use方法是如何实现的。
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){
//逻辑...
}
//5.注册全局组件
Vue.component('myButton',{
//...组件选项
})
}
Vue.use(MyPlugin,{
//...options
})
一个插件内部大概就是如上所示，其实也不外乎上述那几种东西，甚是简单