【vue进阶】优雅自动引入自动注册Vue组件

随着项目的不断变大，可能有些人会把插件的引入和全局组件的注册都放到main.js中，导致后面main.js里面一大坨引入代码，看起来杂乱无比，也不利于后期进行维护，所以我们尽可能的让main.js看起来整洁些。此处就用到webpack的require.context功能，实现Vue自动注册全局组件及插件，方便全局组件和插件的管理。

在Vue项目开发中，经常需要import或者export各种模块，当一个页面中组件很多时，我们可能会这样引入组件：

import A from 'components/A.vue'
import B from 'components/B.vue'
import C from 'components/C.vue'
import D from 'components/D.vue'

要是每加一个组件，都要写这么一句 import ，那岂不是很蛋疼，是否可以通过自动化引入呢？

答案是肯定有的，那就要使用 webpack 给我们提供的 require.context API：

require.context(directory, useSubdirectories, regExp)

它接收三个参数：

• directory: 要查找的文件路径
• useSubdirectories: 是否查找子目录
• regExp: 要匹配文件的正则
  比如我在根目录 src/components下包含多级子目录的组件，如下图：
  

const requireComponent = require.context('../src/components/', true, /\w+\.(vue||js)$/)

我们可以打印一下 ctx，看返回的是什么内容：