require自动化构建

当全局统一注册多个组件，你需要一次引入并注册。就像这样：

import bannerBox from '@/components/banner.vue'
import goodsOrder from '@/components/goods-order.vue'
import selectImg from '@/components/select-img.vue'
import navBar from '@/components/nav-bar.vue'

Vue.component('banner-box',bannerBox);
Vue.component('goods-order',goodsOrder);
Vue.component('select-img',selectImg);
Vue.component('nav-bar',navBar);

看上去是不是不舒服，而且现在还只是四个，如果10个呢，100个呢，每次写一个组件需要在这里加两行代码，难受。这时候就用到了自动化，几行代码全部解决，如下：

import Vue from 'vue'
const modulesContext = require.context('', false, /\.vue$/)
modulesContext.keys().forEach(module=>{
    const REG=/^\.\/(.*)\.vue/ig,
        MO = modulesContext(module);
    Vue.component(module.replace(REG,'$1'),MO.default||MO)
})

解释一下，使用require的方法context()，获取目录结构，其中传三个参数：1. 路径(我这里是是当前目录，所以传了空），2. 是否读取子目录，3. 正则（规定匹配什么样的文件。），modulesContext 上面有几个方法，具体可以读API、我这里用到了key(),这个方法会返回一个数组集，就是（路径+文件名）。如下：

./banner.vue
./goods-order.vue
./select-img.vue
./nav-bar.vue

而require.context('./index.js')可以直接返回文件的export。即modulesContext(module)；
这里用正则过滤掉（./）和（.vue）,作为组件名。
实现组件自动化注册。

——END——