前言

当我们在vue中使用插件时，都会通过Vue.use去注册插件，例如：Vue.use(VueRouter),Vue.use(elementUI)。Vue.use到底做了什么？咱们就以使用element-ui插件为例。

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
console.log(ElementUI)//这里打印出来是一个对象，对象上有一个install方法

从Vue.use文档中可以得知，在调用Vue.use()注册插件时

• 小括号里如果是对象，该对象里面就会有一个install方法,Vue.use会自动调用插件里面的install方法，并传入Vue实例作为第一个参数
• 小括号里如果是一个函数，Vue.use时函数会直接执行

我们看下element-ui内部怎么写的

当我们在项目中需要全局注册多个自定义组件时，也可以通过Vue.use来注册插件，把所有的组件注册代码抽到一个单独js文件中，这样main.js中的代码就不会显得那么臃肿了。

步骤如下：

1.新建vue文件

<template>
  <div>我是页面A</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

<template>
  <div>我是页面B</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2.新建js文件

import pageA from './pageA.vue'
import pageB from './pageB.vue'
export default {
  install:(Vue)=>{
Vue.component('pageA',pageA)
Vue.component('pageB',pageB)
  }
}

3.在main.js导入

import components from './components'
Vue.use(components)

4.在vue文件中直接使用

<pageA></pageA>
<pageB></pageB>

综上所述Vue.use就是通过在内部调用各个组件的install方法来实现全局注册，最后达到一次注册全局使用的目的。