vite vue3 自动注册全局组件异步组件

最新推荐文章于 2024-04-29 10:40:41 发布

新石器原始人

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量643

点赞数

分类专栏： Vite+Vue3 文章标签：前端 Vite Vue3

本文链接：https://blog.csdn.net/w411207/article/details/125757202

版权

Vite+Vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vite vue3 自动注册全局组件，且注册为异步组件。
目录下的子级文件以文件名作为组件名，如 ./HelloWorld.vue，以HelloWorld作为组件名；
孙级、n孙级的index.vue或index.tsx文件以其父级文件夹名称作为组件名，如 ./Table/index.vue，以Table作为组件名，非index文件不注册。

在这里插入图片描述

/**
 * 自动注册全局异步组件 by 新石器原始人
 * 区分大小写
 */
import { App, defineAsyncComponent } from 'vue'

const files = import.meta.glob('./**')

export default {
  install(app: App) {
    for (const file of Object.keys(files)) {
      const m =
        file.match(/^\.\/(?<name>\w+)\.(tsx|vue)$/i) ||
        file.match(/^\.\/((?<name>\w+)\/)+index\.(tsx|vue)$/i)
      if (m?.groups?.name) {
        app.component(m.groups.name, defineAsyncComponent(files[file]))
      }
    }
  },
}