Vue.use()全局注册组件

一、概念

1. Vue.use()用于安装Vue.js插件。
2. 如果插件是一个对象，必须提供install方法；如果插件是一个函数，它会被视为install方法。
3. install方法调用时，会将Vue作为第一个参数传入。也可以在后面传入其他参数
4. 在new Vue()之前调用

二、什么时候需要使用Vue.use()

当需要将某个组件注册成全局组件时

elementUI按需引入 和 vant 按需引入 中，都做了一个操作：

如此一来，我们在项目中某个组件中想要使用elementUI或vantUI的某个组件时，可以直接使用，省去了具体组件中引入和注册的操作

三、Vue.use()中干了啥？

• 为什么elementUI的组件通过Vue.use()后就可以直接使用了？

1. Vue.use()给Vue进行插件注册，实质是执行传入的install方法。install第一个参数是vue的构造函数Vue，在这里可以对Vue做很多扩展

①注册全局组件 Vue.component()

②自定义全局指令 Vue.directive()

③自定义全局过滤器 Vue.filter()

④在Vue.prototype上新增属性或方法，通过this.xx调用

• 仿照elementUI做两个自己的组件供全局使用：

3. src下新建modules文件夹，作为自己的UI组件库
4. modules下新建components文件夹和index.js文件
5. components/MyButton/index.vue

<template>
  <button>按钮 </button>
</template>
<script>
export default { name: 'MyButton' }
</script>

components/MyInput/index.vue

<template>
  <input type="textarea">
</template>
<script>
export default { name: 'MyInput' }
</script>

index.js：在install方法中注册全局组件

import MyButton from './components/MyButton'
import MyInput from './components/MyInput'

const components = [MyButton, MyInput]

// 推荐采用对象形式写法
const XiaoMingUI = {
  install(Vue, num1, num2) {
    console.log({ Vue, num1, num2 })
    for (const item of components) {
      Vue.component(item.name, item) // Vue.use()能够注册全局组件，靠的是install方法中的Vue.component()
    }
  }
}

// const XiaoMingUI = (Vue, num1, num2) => {
//   console.log({ Vue, num1, num2 })
//   for (const item of components) {
//     Vue.component(item.name, item)
//   }
// }

export default XiaoMingUI

4. main.js中引入并注册到全局

import XiaoMingUI from './modules/XiaoMingUI'
Vue.use(XiaoMingUI, 100, 200) // 第一个参数是Vue，后面的参数在install方法中可陆续接收

5. 在项目中任意组件中无需引入，即可使用

<template>
  <div id="app">
    <MyButton />
    <MyInput />
  </div>
</template>

四、基于axios，封装插件，通过this调用

1. 下载axios：npm i axios
2. utils/request.js（axios本身没有install，无法被Vue.use()使用。如果一个插件需要被Vue.use()使用，那么它一定要有install方法，或者它是一个函数默认会被看做是install方法）

import axios from 'axios'

export default {
  install(Vue) {
    Vue.prototype.$http = axios
  }
}

3. main.js

import request from './utils/request'
Vue.use(request)

4. 使用

  created() {
    console.log(this.$http)
    this.$http({ url: '...' }).then((res) => {
      console.log(res)
    })
  }