基于 Vite + Vue3 的组件自动注册功能

极梦网络无忧2026-03-23 12:36

实现一个基于 Vite + Vue3 的组件自动注册功能，能让你无需手动 import 和注册组件，直接在模板中使用。

实现思路

使用 Vite 的 import.meta.glob 方法批量导入指定目录下的所有组件
创建一个组件注册插件，自动全局注册所有导入的组件
提供组件使用示例和目录结构规范

完整实现代码

1. 组件自动注册插件 (src\components\common\index.js)

javascript 复制代码

/**
 * 全局公共组件自动注册
 * 自动注册src/components/common目录下的所有组件
 */

// 导入所有公共组件
import JmForm './JmForm .vue'
import JmTable from './JmTable.vue'
 
/**
 * 自动导入并注册组件
 * @param {Object} app - Vue应用实例
 * @param {Array} exclude - 排除的组件名称列表
 */
export function registerCommonComponents(app, exclude = []) {
  // 组件列表
  const components = {
    JmForm ,
    JmTable
 
  }

  // 注册所有组件
  Object.entries(components).forEach(([name, component]) => {
    // 检查是否在排除列表中
    if (exclude.includes(name)) {
      return
    }
    
    // 全局注册组件
    app.component(name, component)
  })
}

export default {
  registerCommonComponents
}

入口文件引入插件 (src/main.js)

javascript 复制代码

// 导入全局公共组件自动注册
import { registerCommonComponents } from './components/common';

写一个组件页面
直接使用组件 (src/App.vue) 无需引入

html 复制代码

<template>
  <!-- 无需import，直接使用 -->
  <jm-form v-model="form" :items="items" />
  <jm-table :data="list" :columns="columns" /> 
</template>