vue2 webpack版批量注册全局组件

使用背景

用vue开发的所有项目，都是采用组件化的思想开发的，分为公共组件和功能组件。

又可以分为全局自定义组件和局部自定义组件，全局自定义组件在main.js文件直接引入,这种是最简单的方式。

使用缺点

如果我们需要注册的全局组件非常多，那么需要一个一个引入，然后分别调用Vue.componet方法，main.js文件会变得很大很臃肿，不好维护

webpack批量注册组件

webpack提供的一个自动导入的API 

require.context(directory, flag, regExp)

参数1：要导入的当前模块的文件夹目录

参数2：是否加载子目录

参数3：正则，匹配文件

返回值：导入函数 fn

使用require提供的函数context加载某一个目录下所有的.vue后缀的文件

返回值是一个对象，对象里面有一个属keys(), 可以获取所有的文件路径

我们可以遍历importFn.keys()

最后在遍历中使用app.component(component.name, component)全局注册

 在compontents组件文件夹下新建 .js文件

import Vue from 'vue'

const requireComp = require.context('.', true, /\.vue$/)

requireComp.keys().forEach((fileName) => {
  const config = requireComp(fileName)
  Vue.component(config.default.name, config.default || config)
})

 在main.js中导入

import '@/components/componentRegister.js'

在.vue中直接使用 

<template>
  <div>
    <menu />
    <!-- 或 -->
    <MENU />
  </div>
</template>;