Vue3 中自定义组件自动按需加载

自定义组件使用过程中要一个个 import 有点麻烦，最好是可以自动按需加载

简单记录下

首先建一个 components 的目录，再新建组件（文件夹名称为组件名称，index.vue 为组件入口）

/* common components */
// 原生数据类型扩展
export default {
	install(app) {
        // 扫描 ./components 目录及其子目录下的所有.vue 文件
        const moduleFiles = import.meta.glob('@/components/**/index.vue')
        // 全局注册组件
        for(let path in moduleFiles) {
            let segs = path.split('/')
            // 按照指定格式取得 componentName
            const componentName = segs[segs.length - 2]
            // 注册
            app.component(componentName, defineAsyncComponent(moduleFiles[path]));
        }
    }
}

使用的时候直接在<template>中使用

<template>
    <KMessage></KMessage>
</template>