Vue3 全局组件,免导入批量注册全局组件,Ts实现批量注册组件

610 阅读1分钟

Vue3 全局组件,免导入批量注册全局组件,Ts实现批量注册组件

components文件目录下的所有文件都会被批量注册,使用时直接用文件名,遵循驼峰命名法使用即可。

代码:

/*  统一注册 baseComponents 目录下的全部组件 */
import type { App } from 'vue'
export default {
    install: (app: App) => {
        // 引入所有组件下的安装模块
        const modules: any = import.meta.globEager('./**/install.ts')
        for (const path in modules) {
            app.use(modules[path].default)
        }
    }
}

image.png

main.ts中导入一下这个文件

image.png

批量注册实现。