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
}
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']
}
}