注册组件
import { Component } from 'vue'
interface FileType {
[key: string]: Component
}
interface componentItem {
name: string
sfc: Component
}
/*
* 从common、layouts、graph文件夹导入所有的组件
* 每一个文件需要是独立文件夹，通过index.vue导出组件
* “组件名必须写！！！”，将自动组件名注册
*/
const commonFiles: Record<string, FileType> = import.meta.globEager(
'/src/components/common/*/index.vue'
)
const layoutFiles: Record<string, FileType> = import.meta.globEager(
'/src/components/layouts/*/index.vue'
)
const graphFiles: Record<string, FileType> = import.meta.globEager(
'/src/components/graph/*/index.vue'
)
const componentList: componentItem[] = []
const files: Record<string, FileType> = Object.assign(commonFiles, layoutFiles, graphFiles)
Object.keys(files).forEach((c: string) => {
const component = files[c]?.default
componentList.push({ name: component.name as string, sfc: component })
})
export default componentList
main.js
import { App } from 'vue'
import commonComponents from './common-auto-import-components'
import echartsComponents from './echarts-components'
import elementComponents from './element-plus-components'
const customComponents = [
// 便于自动注册每一个自定义组件
...echartsComponents,
...commonComponents
]
export default function installComponents(app: App) {
// 按需注册elementPlus的组件
elementComponents.forEach((component) => {
app.use(component)
})
// 注册自定义组件
customComponents.forEach((component) => {
app.component(component.name, component.sfc)
})
}
