Vue.use(ElementUI)是做什么的？

本文转载自微信公众号“素颜”(gh_a97f4df5b7b9)。在使用ElementUI组件的时候，我们通常这样写：importElementUIfrom'element-ui';Vue.use(ElementUI);这样写完之后，我们就可以直接在我们的自定义组件中使用了：通过这篇文章，我们来分析一下它是如何实现的。Vue提供了一种插件机制，可以将一些属性扩展到Vue。其实这个插件很“可笑”，什么都不做。不信你看源码：vue只是帮你判断是否有重复注册，调用你传递给它的函数，其实我自己也可以调用，不过是个圈，也许框架设计有自己的考虑。正式地，插件可以是函数或包含安装函数的对象。Element-ui可以一次导入所有组件，也可以导入其中一个。它实际上在内部使用了插件机制。我们自己实现一下：目录结构如下：SyElement/index.js：定义了一个插件，其中通过Vue提供的全局函数组件全局注册了组件SyInfo和SyMessage，见代码：importSyInfofrom'./SyInfo/index';importSyMessagefrom'./SyMessage/index';importlogfrom'./log';exportdefault{install(Vue,options){//全局注册组件SyInfoVue.component(SyInfo.name,SyInfo);//全局注册组件SyMessageVue。component(SyMessage.name,SyMessage);//给Vue添加一个全局函数，可以在所有组件中使用Vue.prototype.$loglog=log;}}因为需要支持单个组件的使用，所以每个组件都是其实也是一个插件。importSyMessagefrom'./src/component.vue';//提供一个安装函数SyMessage.install=function(Vue){Vue.component(SyMessage.name,SyMessage);}exportdefaultSyMessage;component.vue是一个组件的具体实现:SyMessage和SyInfo一样.此时可以和Element-ui一样使用：importElementUIfrom'element-ui';Vue.use(ElementUI);多说一句：有时候，有些业务需要在各个组件中使用某个服务，比如数据统计，其实可以挂载Vue全局中的一个函数，可以在每个组件中使用。比如文中提到的log就是一个全局挂载的函数：Vue.prototype.$loglog=log;它可以在所有组件中使用：this.$log({uid:'suyan'});