关于Vue.use()的解释

前言

用过vue开发的小伙伴们一定对Vue.use()不陌生，当我们再引入一些插件的时候经常需要再main.js里面用到这个语法，比如Vue.use(VueRouter)、Vue.use(ElementUI)、Vue.use(MintUI)。有一些插件则不需要用Vue.use()，比如axios,直接用export default暴露一个对象就可以使用了。

先解释一下根本原因：因为axios没有install。接下来再结合代码来详细解释。

代码解释

首先我们自定义生成一个模板： vue init webpack-simple vue-use，vue-use是新建的文件夹的名称，再一路回车即可 （得保证有全局得vue/cli-init才能使用vue init命令：yarn global add @vue/cli-init)。

然后进入到vue-use文件夹，yarn install 安装本次需要的模块，npm run dev运行项目即可。若是能正常打开项目，则进行下一步。

当前创建的项目目录：

1.创建如下图中的文件夹和文件

2.在happy.vue中定义一个组件

<template>
    <div class="happy-box">
        happy
    </div>
</template>

3.在index.js中引入happy.vue，并且导出

// 引入happy.vue组件
import HappyComponent from './happy.vue'
// 定义happy对象
const happy = {
    // install是默认的方法。当外界在use这个组件的时候，就会调用本身的install方法，同时传入一个Vue这个类的参数。
    install:function(Vue){
        Vue.component('happy',HappyComponent)
    }
}
// 导出happy
export default happy

4.在main.js中引入happy文件下的index.js文件

// 其中'./components/happy/index' 的 /index 可以不写，webpack会自动找到并加载 index 。如果是其他的名字就需要写上。
import Happy from './components/happy/index.js'
// 这个时候需要Vue.use(Happy)，如果不写Vue.use(),浏览器会报错（有兴趣的小伙伴可以试一下）
Vue.use(Happy)

5.在App.vue里面写入定义好的组件标签：<Happy></Happy>

<template>
  <div id="app">
    <h1>Vue.use()的原理</h1>
    <Happy>HAPPYING-MAYDAY</Happy>
    <Happy></Happy>
  </div>
</template>

效果：