在Vue中批量导入公用组件

原创于 2023-05-16 09:58:23 发布 · 569 阅读

CC 4.0 BY-SA版权

文章标签：

文章介绍了一种在Vue项目中自动导入和注册以_base-开头的组件的方法。通过创建autoImport.js文件，利用require.context遍历components文件夹中的Vue组件，并使用lodash的upperFirst和camelCase函数处理文件名以生成组件名称，然后在main.js中全局引入，使得开发者可以在任何需要的地方直接使用这些组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在components文件夹中创建一个autoImport.js文件

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
    '.',
    false,
    /_base-[\w-]+\.vue$/
)
requireComponent.keys().forEach(fileName => {
    const componentConfig = requireComponent(fileName)
    const componentName = upperFirst(
        camelCase(
            fileName
                .replace(/^\.\/_/, '')
                .replace(/\.\w+$/, '')
        )
    )
    Vue.component(componentName, componentConfig.default || componentConfig)
})