一、步骤讲述

1. 使用require.context导入大量组件，require.context，如果有兴趣大家可以去看一下webpack官网。
2. 注册导入大量组件的文件。

首先介绍一些require.context方法：

require.context(directory, useSubdirectories = false, regExp = /^\.\//) 
一共接收三个参数：1.传入搜索的目录 2.一个Boolean值，表示是否加载子目录 
3.一个正则表达式 
返回值：一个函数，有一个keys属性，这个属性为一个函数，返回值为匹配到的路径数组

二、具体使用

1.首先在存有大量组件的文件夹中，新建一个js文件（如：nowImport.js），然后写入导入代码：

// require.context中第二个参数有两个值：true和false，分别为是否搜索子文件夹
const imports = require.context('./', true, /\.vue$/)

export default {
    install (app) {
        imports.keys().forEach(e => {
            const component = imports(e).default
            app.component(component.name,component)
        })
    }
}

上面代码中component.name是需要导入的组件的name值，所以组件的script值应有name，如：

<script> export default { name: "headerOne" } </script>

2.在main.js中导入此文件，代码为:

import nowImport from "@/components/component/nowImport"; 
app.use(nowImport)

代码环境 vue3.0