2020-02-18 批量注册 Vue Components

发表于 2020-02-18 更新于 2025-11-12 分类于 Vue 阅读次数： 687 1 分钟

在 vue 中我们为了对项目结构进行分离，通常会抽离出许多可以复用的组件出来。而这些组件都需要注册在 Vue 这个全局变量上才行。如果组件数一多，光是注册就让人头疼。而更加头疼的是，有时候要等运行报错了才知道这个组件忘记注册了，因此需要一个能够批量注册组件的方法。

2020-02-18 批量注册 Vue components

话不多说，直接上代码

import Vue from 'vue'
import _ from 'lodash'
const requireComponent = require.context('@/components', true, /\.vue$/)
// 批量注册组件
requireComponent.keys().forEach(fileName => {
    const componentConfig = requireComponent(fileName)
    const componentName = _.upperFirst(// 调整风格为首字母大写驼峰
        _.camelCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
    )
    Vue.component(componentName, componentConfig.default || componentConfig)
})

这段代码只能在 webpack 或 vue-cli 项目中用，因为用到了 webpack 的 api。

建议放在 components 文件夹下的根目录，最后在 main.ts 中导入 components 文件夹即可

本文作者：草梅友仁
本文地址： https://blog.cmyr.ltd/archives/d739eb0f.html
版权声明：本文采用 CC BY-NC-SA 4.0 协议进行分发，转载请注明出处！