vue 引入公共组件之 require.context

require.context是webpack中，用来建立本身的（模块）上下文

webpack 会在打包构建代码中解析它

require.context接收三个参数：

1. 要搜索的文件夹目录
2. 是否搜索它的子目录
3. 以及一个匹配文件的正则表达式

require.context('../views/components', true, /\.vue/)
复制代码

在咱们项目中，有不少自定义的全局组件，使用这个将会很是方便，下面举例说明

我这里只写了两个，当咱们有一百个的时候，若是手动全局引入。。。

这将是惨不忍睹的

因此，投机取巧的咱们，利用了 require.context

import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每一个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径做为组件名
  const reqComName = fileName.split('/')[1]
  // 组件挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})

复制代码

一段话搞定一整个文件夹的组件，是否很方便