本文已参与[新人创作礼]活动，一起开启掘金创作之路。

一. 正常操作(如果嫌太墨迹，可直接跳到二)

公共组件的好处：开发便利和可复用性

1. 准备工作

创建PageTools/index.vue作为公共组件（这里用PageTools文件夹包裹index.vue是为了更好存储之后可能创建的多个公共组件）

<template>
  <div class="PageTools">
    <el-card>
      <div class="box">
        <div class="left">
          <slot name="left" />
        </div>
        <div class="right">
          <slot name="right" /></div>
      </div>
    </el-card>
  </div>
</template>

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

    }
  },
  computed: {
  },
  created() {
  },
  methods: {
  }
}
</script>
<style lang='scss'  scoped>
.PageTools{
  padding: 30px;
  .box{
      display: flex;
      justify-content: space-between;
  }

}
</style>

2. 在main.js中引入即可全局使用

(1)在main中直接引入

了解Vue.component:注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称

import PageTools from '@/PageTools'
Vue.component("PageTools",PageTools)
            //组件名称     组件名

(2)优化：创建一个index.js用于引入全局公共组件，因为项目如果直接在main.js中直接引入大量公共组件的话不利于后期维护

在index.js中

import Vue from 'vue'
import PageTools from '@/PageTools'
Vue.component('PageTools', PageTools)

在main.js中

import "@/components"

(3)再次优化，使用Vue.use运行插件

了解Vue.use用法：如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为install方法。install 方法调用时，会将 Vue 作为参数传入

注：该方法需要在调用 new Vue() 之前被调用。

在index.js中

import PageTools from '@/PageTools'
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}

在main.js中

import pluginCom from '@/PageTools'
Vue.use(pluginCom)

二. 我们一个个注册全局组件过于麻烦，这里推荐一种批量注册组件的方法

我们这里使用的是webpack提供的方法require.context()

了解require.context()

（1）require.context中的第一个参数是'文件路径'

（2）第二个参数是用于判断深层次查找，为布尔型，这里的深层次查找的意思是判断是否在当前目录的基础上再向内部查找，举个形象的例子就是，同级有一个文件夹，当该参数为true时向文件夹内查找，false则止步于文件夹外层

（3）第三个参数是匹配的文件后缀，例如查询vue的就是/\.vue$/

具体步骤

0. 在main.js中统一注册公共组件（注：之后注册的公共组件都包含其中）

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

1. 在你选中的目录components下创建基本结构（这里的基本结构上一篇文章有讲过这里就不细说了）

export default {
  install(Vue) {
  },
};

2. 调用require.context获取当前目录下的vue组件

export default {
  install(Vue) {
    var requireComponent = require.context("./", true, /\.vue$/);
  },
};

（1）这里我们使用console.log(requireComponent)打印的话会得到一个webpackContext（req）的函数

（2）如果我们使用console.dir(requireComponent)的话会得到一个关于webpackContext（req）的对象

（3）我们使用console.dir(requireComponent.keys())会得到一个数组，这个数组中存放的就是当前路径下的相应vue的具体路径

3. 循环遍历获取模块数组

export default {
  install(Vue) {
    var requireComponent = require.context("./", true, /\.vue$/);
    requireComponent.keys().forEach((item) => {
      console.log(requireComponent(item));
    });
  },
};

（1）这里我们可以得到当前目录下每一个vue模块

（2）在每个vue模块中都存放着当前模块的所有

4.声明一个变量存储requireComponent(item).default

export default {
  install(Vue) {
    var requireComponent = require.context("./", true, /\.vue$/);
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent(item), 6);
      var moduleDefault = requireComponent(item).default;
      console.log(moduleDefault);
    });
  },
};

我们可以看到 这里的moduleDefault其实就等同于了 import Breadcrumb from "@/components/Breadcrumb",moduleDefault.name也可为当前组件名

5. 使用Vue.component()注册组件

export default {
  install(Vue) {
    var requireComponent = require.context('./', true, /\.vue$/)
    requireComponent.keys().forEach((item) => {
      var moduleDefault = requireComponent(item).default
      Vue.component(moduleDefault.name, moduleDefault)
    })
  }
}