介绍

ng-mfe 是一套基于 Vite 的企业级微前端框架,为大型多团队协作的前端工程提供:

• 应用编排 — 子应用注册、按需/预加载、生命周期托管、健康检查;
• 隔离 — Proxy / Snapshot 双模式 JS 沙箱 + 三种 CSS 隔离模式 + 定时器/事件补丁;
• 通信 — 跨应用事件总线(含 RPC 模式)与响应式共享状态;
• 企业服务 — ACL、Auth、多级缓存、HTTP 管道、Mock、主题/I18n 等 11 项界面无关服务;
• 多框架 — Angular(主框架)、Vue、React 统一适配,Web Component 与纯 JS 应用可手动挂载。

按你的身份选择入口

你是谁	从这里开始
🔰 第一次接触微前端	什么是微前端 — 用 30 分钟建立认知与术语表
🚀 想立刻看到效果	快速上手 — 5 分钟跑起 6 个示例应用
🛠️ 要基于框架开发业务	子应用开发指南 — 从零接入一个新子应用
🏗️ 要理解设计、扩展框架	总体架构 → 扩展指南 → 参与贡献

完整的分阶段路线(认知 → 跑起来 → 用起来 → 深入原理 → 参与共建)见学习路径。

何时选择 ng-mfe

• 主应用为 Angular,同时需要接入 Vue / React / 传统页面;
• 子应用需要独立开发、独立部署,但不希望引入 Webpack 时代的构建链(如 qiankun);
• 需要开箱即用的权限、认证、缓存、Mock 等企业设施,而不是每个项目重造一遍;
• 关注交互体验,需要地图瓦片缓冲、虚拟滚动缓冲、请求合并等缓冲手段。

包结构

全部能力收敛在 5 个发布包 + 2 个私有工具包中,均支持子路径按需引入:

包	职责
@ng-mfe/core	引擎、沙箱、事件总线、共享状态、工具(子路径 /sandbox /event-bus /shared-state /util)
@ng-mfe/services	11 项界面无关服务(子路径 /acl /auth /cache …)
@ng-mfe/adapters	Angular / Vue / React 适配器(子路径 /angular /vue /react)
@ng-mfe/ui	图表、地图、动态表单、智能表格(子路径 /chart /map /schema-form /smart-table)
@ng-mfe/testing	测试辅助:DOM 帮助、Mock 工厂、HTTP 测试后端

私有包:@ng-mfe/devtools(运行时可观测:事件/状态/应用历史)、@ng-mfe/cli(create-mfe-app 脚手架)。逐包 API 与迁移对照见包结构总览。

架构决策与分层约束见总体架构。