彻底弄懂 Vue.use() 方法

相信很多人在 Vue 中使用别人的组件时，会用到 Vue.use() 。例如：Vue.use(VueRouter)、Vue.use(MintUI)。但到了 axios，不需要 Vue.use(axios) 就能直接使用了，这是为什么呢？

接下来我们自定义一个需要 Vue.use() 的组件，也就是有 install 的组件。

创建项目

使用 vue init webpack-simple myProject（myProject 为新建的文件夹名称）创建一个项目，然后一路回车。

cd myProject 进入该目录，npm i 安装本次需要的模块。

npm run dev 运行该项目。

创建如下图中的文件夹和文件：

定义 Hello 组件

<template>
    <div>
        this is Hello...
    </div>
</template>

定义 World 组件

<template>
    <div>
        this is World...
    </div>
</template>

在 index.js 中引入两组件，并导出：

// 引入组件
import Hello from './Hello.vue'
import World from './World.vue'

// 定义 Loading 对象
const installObj = {
  // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
  install: function (Vue) {
    Vue.component('sayHello', Hello),
    Vue.component('sayWorld', World)
  }
}

// 导出
export default installObj

在 main.js 中引入 installExample 目录下的 index.js

import Vue from 'vue'
import App from './App.vue'
// 这里用什么名字，并不重要
import installObj from './components/installExample/index'

// 只要这里引用对就行
Vue.use(installObj)

new Vue({
  el: '#app',
  render: h => h(App)
})

在 App.vue 里面写入定义好的两个组件标签 <sayHello></sayHello> ，<sayWorld></sayWorld>

<template>
  <div id="app">
    <h1>vue install example</h1>
    <sayHello></sayHello>
    <sayWorld></sayWorld>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {}
  }
}
</script>

<style>
</style>

结果如下

文末总结

就算没用独立引用 sayHello 和 sayWorld 这两个组件，它俩依然可以被全局使用。 Vue.use()的作用就是让它里面被注册的组件能够被全局使用。
axios为什么不需要用 Vue.use(axios)就能直接使用？

axios 内部并没有提供相应的组件供用户全局使用，开发者在封装 axios 时，根本就没有配置 install 。
就算 axios 内部提供了全局组件，只要不使用这些组件，就算不使用 Vue.use(axios)进行注册，也不会报错。

提供 install 方法，只是为了让 Vue 可以将组件注册到框架里去，使其能够被全局使用。

最后编辑于：2020.12.23 14:02:21