vue3-实现手动注册组件和批量注册组件

手动注册组件

src/components/index.js

import Skeleton from './Skeleton'
 import XtxCarousel from './library/xtx-carousel.vue'
 export default {
   install (Vue) {
     Vue.component(Skeleton.name, Skeleton)
     Vue.component(XtxCarousel.name, XtxCarousel)
   }
 }

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')

批量注册组件

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')