Monorepo · Vue + TS + Vite + Module Federation2

支持热插拔的微前端、插件化框架

主应用只负责登录与外层布局,业务模块由各子应用提供;子应用可独立构建、独立部署、独立访问。

主应用极薄 子应用热插拔 独立构建部署 独立访问 共享单例

在线演示地址

一个主入口 + 三个子应用站点,四个域名对应四份可独立部署的产物。

主入口(主应用)主应用

http://micro.eleadmin.com
  • 登录、忘记密码、外层布局、子应用注册与路由分发都由主应用提供
  • 内容区页面按菜单从对应子应用远程加载,退出登录自动清空
立即访问

子应用一 · 系统管理子应用

http://system.eleadmin.com

仪表盘、组织、用户、角色、菜单、字典等基础能力;独立访问时只加载本应用菜单。

独立访问

子应用二 · 页面模板子应用

http://template.eleadmin.com

列表、表单、结果、异常等页面骨架,新业务照模板改即可。

独立访问

子应用三 · 扩展示例子应用

http://example.eleadmin.com

编辑器、上传、地图、图表、打印、水印、AI 对话等组件能力一览。

独立访问

主应用只做「框子」,业务页面来自子应用

主应用 app-main —— http://micro.eleadmin.com 登录 / 忘记密码 / 顶栏 / 侧边菜单 / 页签 / 主题 / 退出登录
登录页 外层布局 远程应用注册 菜单路由分发
菜单(后端下发)
内容区域 —— 由子应用远程提供
仪表盘 / 组织 / 角色 / 菜单 / 字典 系统管理 app-system
列表 / 表单 / 结果 / 异常 页面模板 app-template
编辑器 / 上传 / 地图 / 图表 扩展示例 app-example
独立交付:每个子应用都是一个完整应用,可单独构建、单独上线,互不影响;独立访问时携带自己的 appCode 请求菜单,只渲染属于自己的页面。
共享单例:vue、vue-router、pinia、vue-i18n、axios、element-plus、ele-admin-plus、app-core 以 shared + singleton 共享,登录态与路由全局只有一份。
轻量选型:主应用与子应用同属一套技术栈,用 Module Federation2 模块联邦而非 qiankun / 无界,无需沙箱与协议转换层。

项目结构

- ele-admin-plus-micro-ultra
  |-apps# 应用包
  |   |-app-main# 主应用,主入口应用
  |   |-app-system# 子应用一,远程应用
  |   |-app-example# 子应用二,远程应用
  |   |-app-template# 子应用三,远程应用
  |-packages# 公共包
  |   |-ele-admin-plus# Ele 开头的扩展组件库
  |   |-app-assets# 静态资源,按需打包
  |   |-app-config# 公共配置,按需打包
  |   |-app-core# 应用共享核心,路由、状态管理等,shared 保证状态统一
  |   |-app-utils# 公共工具,按需打包
  |   |-app-api# 公共 API 接口,按需打包
  |   |-app-composables# 公共组合式工具,按需打包
  |   |-app-components# 公共组件,按需打包
  |   |-app-business# 公共业务组件,按需打包
  |   |-app-base# 应用基座,vue app 入口,子应用也要独立访问,所以抽取为公共包
  |-public# 公共静态资源
  |-scripts# 脚本
  |-docs# 文档
  |-AGENTS.md
  |-llms.txt
  |-turbo.json# 命令编排配置
  |-.dependency-cruiser.js# 依赖治理配置
  |-eslint.config.js# eslint 配置
  |-tsconfig.json
  |-package.json

Monorepo 架构,使用 Vite + Module Federation2 模块联邦,支持热更新。

为多团队、长期演进设计

01主应用极薄业务代码全部在子应用,主应用几乎不用改。
02子应用热插拔后端返回远程应用列表即完成装配,增删改不需要动主应用。
03一键新建子应用脚手架自动生成骨架、分配端口、注册命令变体。
04依赖可治理分层依赖检查拦截循环、越层与幽灵依赖,当前 0 违规。
05页面模板化表格、增删改查、树表格、左树右表等骨架开箱即用。
06AI 友好AGENTS.md + llms.txt + docs/* 三层约定,AI 改代码有据可依。

统一门户与独立交付同时具备

团队怎么拆,应用就怎么拆;应用怎么拆,发布就怎么发。

产品名称

EleAdminPlus微前端尊享版

使用Vue3、ElementPlus搭建,微前端、插件化

产品规格
源码
授权时长
永久
在线客服
QQ
微信