vue3

自动注册components目录下所有vue组件并以组件的文件名为组件的名称

# components/index.ts 配置如下:

import { type App, defineAsyncComponent } from 'vue'
const components = Object.entries(import.meta.glob('./**/*.vue'))
const preFix = 'Es'
export default {
  // use 的时候
  install: (app: App) => {
    components.forEach(([key, comp]) => {
      // 得到组件的名称
      const name = getCompName(comp.name || key)
      app.component(preFix + name, defineAsyncComponent(comp as any))
    })
  }
}

function getCompName(key: string) {
  const nameReg = /\/(\w+).vue/
  return nameReg.test(key) ? key.match(nameReg)![1] : key
}

# main.js 配置如下:

import { createApp } from 'vue'
import App from './App.vue'

import MyComponents from './components'

createApp(App).use(MyComponents).mount('#app')

# 为全局组件添加类型提示

src/typings/component.d.ts 配置如下:


export {}

declare module 'vue' {
  export interface GlobalComponents {
    EsDialog: typeof import('../components/Dialog.vue')['default']
  }
}
上次更新: