vue webpack动态的引入组件

vue项目中会创建很多公共的组件，使用这些组件时需要每个页面都需要引入一次，有时会是同一个组件多个页面都需要引入，就会觉得很繁琐，可以使用下面这段代码进行动态的引入当前目录下的所有vue文件，截取组件名称，统一注册后，就可以在任何一个也i按直接使用，从而不再需要import。

/**
 * 借助webpack使用require.context()方法创建自己的(模块)上下文，从而实现自动动态require组件。
 * 该方法需要三个参数：要搜索的文件夹目录、是否还搜索他的子目录，一个匹配文件的正则表达式
 * 在main.js里引入当前文件
 */
import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context('./', false, /\.vue$/) // 找到components文件夹下以.vue命名的文件

requireComponent.keys().map(fileName => {
  const componentConfig = requireComponent(fileName)
  // 因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  const name = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
  const componentName = capitalizeFirstLetter(name)
  Vue.component(compo