vue3-实现批量注册组件

// src/components/index.js

const requireComponent = require.context('./', true, /.vue$/)
console.log(requireComponent.keys(), 3344222)

export default {
  install (Vue) {
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
      /* 获取的是 每一个组件暴露出来的对象 */
      const defaultObj = requireComponent(item).default
      Vue.component(defaultObj.name, defaultObj)
    })
  }
}

• require.context(参数1,参数2,参数3) 是webpack提供的一个自动导入的API 参数1:加载的文件目录

参数2:是否加载子目录

参数3:：正则，匹配文件 requireComponent:返回值：导入函数 fn keys() 获取读取到的所有文件列表

//main.js

import { createApp } from 'vue'
import componentPlugin from '@/components/index.js'
const app = createApp(App)
app.use(componentPlugin).use(store).use(router).mount('#app')

解决一些eslink报错