vite 自动注册文件夹下的component组件

最新推荐文章于 2024-07-25 15:37:42 发布

丶久友

最新推荐文章于 2024-07-25 15:37:42 发布

阅读量758

点赞数

分类专栏：进击中的vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44614772/article/details/129011161

版权

进击中的vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

// 手动注册组件
// import svgIcon from './svg-icon/index.vue'
// import popup from './popup/index.vue'

// export default {
//     install (app) {
//         app.component('m-svg-icon', svgIcon)
//         app.component('m-popup', popup)
//     }
// }

// vite 自动注册组件
import { defineAsyncComponent } from "vue";
export default {
    install(app) {
        // 1. 获取当前路径下所有文件夹中的 index.vue
        const components = import.meta.glob('./*/index.vue')
        // 2. 遍历获取到的组件模块
        for (const [fullPath, fn] of Object.entries(components)) {
            // 3. 利用 app.component 注册组件
            const componentName = 'm-' + fullPath.replace('./', '').split('/')[0]
            app.component(componentName, defineAsyncComponent(fn))
        }
    }
}