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

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

webpack

const requireComponent = require.context('./library/', true, /\.vue$/)
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() 获取读取到的所有文件列表*/

vite 

// 一个 *：匹配当前目录下的文件
// 两个 *：匹配当前目录及其嵌套的全部子目录下的文件
// const requireComponent = import.meta.globEager('./library/*.vue')
const requireComponent = import.meta.globEager('./library/**/*.vue')
export default {
  install (Vue) {
    Object.keys(requireComponent).forEach(item => {
      const defaultObj = requireComponent[item].default
      Vue.component(defaultObj.name, defaultObj)
    })
  }
}

main.js

import PluginCom from '@/components'

// 创建一个vue应用实例
createApp(App).use(PluginCom).use(store).use(router).mount('#app')