Vue3批量注册组件

src/components/index.ts

// 安装lodash插件
// npm i D lodash   
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
export default {
    install(app:any) {
        /*webpack写法
        let components = require.context('./', false, /\.vue$/) 
        */
        /*vite写法*/
        let components =
            import.meta.glob('./**/*.vue',{ eager: true })
        Object.keys(components).forEach((component, index) => {
            
            const componentConfig:any = components[component]
            const componentName = upperFirst(
                camelCase(
                    component
                    // 不包括文件夹名
                    // components/A/B/C  使用 <C />
                    .replace(/^\.\/.+\//, '')
                    // 包括文件夹名
                    // components/A/B/C  使用 <ABC />
                    // .replace(/^\.\//, '')
                    .replace(/\.\w+$/, '')
                )
            )
            app.component(componentName, componentConfig.default || componentConfig)
        });
    }
}
复制代码

src/main.ts

import { createApp } from 'vue'
import components from './components'
const app = createApp(App)
app.use(components)
app.mount('#app')