Vue使用require.context批量注册全局组件。
require.context 是Webpack的一个api函数。我们把Vue项目的components组件统一放在一个components目录内，一个组件一个文件，例如image-list.vue组件。一个项目往往包含几十个组件为了在新增加组件或者删除组件后，不需要修改额外的代码。希望能自动的导入这些组件，通过Vue.component("组件名", {组件对象}) 注册全局组件。
在components目录的同级新建一个index.js 文件：
里面的内容如下所示：
import Vue from 'vue'
const requireComponent = require.context(
// 其组件目录的相对路径
'./',
// 是否查询其子目录
true,
// 匹配基础组件文件名的正则表达式
/[A-Za-z]\w+\.(vue)$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 全局注册组件
Vue.component(componentConfig.default.name, componentConfig.default)
})上面代码，通过require.context 自动查询 index.js当前目录和子目录里面的vue后缀文件，遍历文件列表，导入组件。
require.context函数接受三个参数
directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
regExp {RegExp} -匹配文件的正则
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
在哪里用这个index.js文件？ 假设index.js 文件在views目录下。
那么，在vue项目的main.js 文件里面直接import
import '@/views/index.js';
new Vue({
data(){
return { ……}
}
……
render: function (h) { return h(App) },
}).$mount('#app')
然后，在Vue里面的任一个文件里面都能直接使用自己定义的组件了。
是不是感觉维护起来简单方便了。不需要在哪里用到组件就写一次import；
