说明

公共组件就是你定义的，在全局都可使用的组件
components / index.js是专门负责注册公共组件的文件，它在components文件夹的根目录下

代码

// 1. 导入Vue
import Vue from 'vue'

// 2. 调用context()方法
const requireComponet = require.context('./', true, /.vue$/)
requireComponet.keys().forEach((item) => {
  const defaultCom = requireComponet(item).default
  Vue.component(defaultCom.name, defaultCom)
})

// 3. 到main.js中：
// 导入index.js文件

写法分析

1. 导入 Vue 到 index.js 中

2. 调用context( )方法

require.context( )是webpack的语法，它的返回值是一个webpack函数，把此函数存入变量requireComponent 。然后再调用这个函数的keys()方法，能得到一个数组，数组成员是所用公共组件的index.vue文件的路径，如下图：

context( ) 的第 1 个参数：公共组件文件夹的路径，字符串。如果 index.js在components文件夹的根目录下，那么这个路径就是当前文件夹： . /

context( ) 的第 2 个参数：是否开启webpack深度查找，布尔值。不同公共组件可能有多层文件夹，开启深度查找能找到最里层的 index.vue文件

context( ) 的第 3 个参数：限定你想查找的文件是 .vue结尾的，正则 / .vue$ /

3. forEach( )遍历刚刚的数组

将遍历项item（即index.vue文件的路径）传入requireComponent 函数，得到名为Module的对象，如下图：

访问Module对象的default属性，得到的就是你定义的公共组件export default { } 导出的那个对象，也就是你的公共组件。

所以requireComponent.default.name得到的就是公共组件的name属性，而公共组件就是requireComponent.default

4.引入到main.js中

到此，你写在components文件夹中的所有公共组件都即将被注册为全局组件，你还需要让index.js中的代码执行将 index.js 引入 main.js中，执行 index.js中的代码

使用该方法的注意点：

每个公共组件都必须有name属性值
公共组件文件夹的路径要正确

【30秒系列】自动批量注册公共组件

说明

代码