vue3批量导入全局注册组件

博主最近在做一个需要使用大量全局注册组件的项目，而如果将所有的组件都单个引入，不仅前期写起来麻烦，而且后期维护也让人头疼，所以我们可以选择批量导入的方式。

一、步骤讲述

经过大量的搜索、整理以及自己的使用情况，步骤如下：

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

二、具体使用

1. 首先在存有大量组件的文件夹中，新建一个js文件（如：batchImport.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 batchImport from "@/components/component/batchImport";
   
   app.use(batchImport)
   

3. 在vue文件中使用

   <template>
   	<div v-for="(item,index) in component" :key="index" class="container-component">
            <component :is="item.name"></component>
       </div>
   </template>
   

   export default {
      name: 'Home',
      data() {
        return {
          component: [{
          	name: 'hello'
    	   },{
    	    name: 'login'
    	   }]
      	 }
    	}
    }
   

三、代码验证环境

• vue3.0