vue3注册文件夹下面的全局组件

最新推荐文章于 2024-05-30 11:27:58 发布

KAGHQ

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量185

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/LRQQHM/article/details/134181546

版权

import { createApp } from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const app = createApp({})

// 导入包含所有组件的文件夹
const requireComponents = [
  import.meta.glob('./components/common/*.vue'),
  import.meta.glob('./components/other/*.vue')
]

requireComponents.forEach(async requireComponent => {
  const files = Object.keys(await requireComponent)
  
  files.forEach(async fileName => {
    const componentConfig = await requireComponent[fileName]()
    
    // 将文件名转换为PascalCase命名规则并去除前面的文件夹名字
    const componentName = upperFirst(
      camelCase(
        fileName.replace(/^.+\/([^/]+)\.vue$/, '$1')
      )
    )

    // 全局注册组件
    app.component(componentName, componentConfig.default || componentConfig)
  })
})

app.mount('#app')