vue3 自动批量注册组件

1. 首先把公共组件放到一个文件夹下,例：@/components/library;
2. 使用require提供的函数context加载某一个目录下所有的.vue后缀的文件;
3. 然后context函数会返回一个导入函数importFn;
4. 他有一个返回属性keys()获取所有的文件路径;
5. 通过文件路径遍历数组，再使用 importFn导入组件对象;
6. 遍历的同时进行全局注册即可;

// context(目录路径，是否加载子目录，加载文件的匹配正则)
const importFn = require.context('./', false, /\.vue$/)
export default {
  install (app) {// 根据keys批量注册
    importFn.keys().forEach(path => {
      // 导入组件
      const component = importFn(path).default
      // 进行注册
      app.component(component.name, component)
    })
  }
}

在main.js中使用组件

// 导入自己UI组件库
import UI from '@/components/library'
createApp(App).use(store).use(router).use(UI).mount('#app')