vue3全局组件注册&&异步加载方式

方案一 结合defineAsyncComponent异步加载

组件位置定义

 

注册代码文件config 

defineAsyncComponent异步加载组件

// 自动注册全局组件
// vue3 vite写法
import { defineAsyncComponent } from 'vue'
const requireComponent = import.meta.glob('../../../components/common/*.vue')
const install = (Vue: any) => {
  for (const key in requireComponent) {

    if (Object.prototype.hasOwnProperty.call(requireComponent, key)) {
      // 获取和目录深度无关的文件名
      const mid: any = key.split('/').pop()
      let componentName: any = mid.replace(/\.\w+$/, '')
   
      let config = requireComponent[key]
      Vue.component(componentName, defineAsyncComponent(config))
    }
  }
}
export default {
  install
}

main文件引入 使用

import common from './assets/js/core/config'
app.use(common)

 

方案二

组件位置定义

 代码注册文件addComponents

import { App } from 'vue';
const components = await import.meta.glob(['../components/**/*.vue'], {
    eager: true,
    import: 'default',
});

function toPascalCase(str: string): string {
    return str
        .split('-') // 分割短横线
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // 将每个单词的首字母转为大写
        .join(''); // 重新组合成一个字符串
}

export default {
    install(app: App) {
        for (const path in components) {
            const pathArr = path.match(/([^/]+)/g);
            app.component(toPascalCase(pathArr[2]), components[path]);
        }
    },
};

 

main文件引入

import addComponents from '@/lib/addComponents';
app.use(addComponents);