教程总览
本系列教程基于 ng-mfe 仓库 examples/ 目录下的真实可运行示例编写,共 15 篇,覆盖从启动 Portal、五个框架的子应用接入,到通信、状态、HTTP、认证、缓存、组件复用、地图、权限、主题国际化的完整实战。所有示例代码均节选或改写自仓库源码。
学习路线图
全部教程
| 编号 | 教程 | 难度 | 前置 |
|---|---|---|---|
| 01 | 启动 Portal | 入门 | 无 |
| 02 | 创建第一个子应用 | 入门 | 01 |
| 03 | Angular 子应用接入 | 进阶 | 02 |
| 04 | Vue 子应用接入 | 进阶 | 02 |
| 05 | React 子应用接入 | 进阶 | 02 |
| 06 | Web Component 子应用 | 进阶 | 02 |
| 07 | 跨应用通信 | 核心 | 02 |
| 08 | 共享状态 | 核心 | 07 |
| 09 | HTTP 与 Mock | 核心 | 02 |
| 10 | 认证与登录态 | 核心 | 08、09 |
| 11 | 多级缓存 | 核心 | 09 |
| 12 | 跨应用组件复用 | 进阶 | 07 |
| 13 | 地图集成 | 进阶 | 08、14 |
| 14 | 权限控制 | 核心 | 10 |
| 15 | 主题与国际化 | 进阶 | 08 |
框架接入能力矩阵
下表列出各框架子应用消费 Portal 共享服务的真实 API(均来自 @ng-mfe/adapters 与 MfeBootstrapContext):
| 能力 | Angular | Vue | React | Web Component / 纯 JS |
|---|---|---|---|---|
| 适配器包 | @ng-mfe/adapters/angular | @ng-mfe/adapters/vue | @ng-mfe/adapters/react | 无需适配器,直接消费 ctx.* |
| 应用定义 | defineMfeAngularApp | defineMfeVueApp | defineMfeReactApp | defineMfeApp(core) |
| 服务注入 | createMfeProviders(InjectionToken) | createMfeVuePlugin(provide/inject) | buildContextValue + MFEProvider(Context) | 闭包变量保存 ctx |
| 状态桥 | createSharedStateBridge → Signal | createSharedStateComposable | createSharedStateHook(useSyncExternalStore 兼容) | ctx.sharedState.subscribe |
| 事件桥 | createEventBridge | createEventBusComposable | createEventBusHook | ctx.eventBus.on / onAny |
| ACL | createAclGuard / createAclChecker | v-acl 指令(createAclDirective)/ createMfeAclGuard | createAclRouteCheck | ctx.acl.canAbility |
| HTTP | createHttpPipelineInterceptor | createMfeAxiosInterceptors | createMfeFetch | 原生 fetch(Mock 层拦截) |
| i18n | createI18nTranslator | createI18nComposable | createI18nHook | ctx.i18n.fanyi |
环境准备
开始教程前,确认你的环境满足要求(来自根目录 package.json 的 engines 约束):
- Node.js >= 20.0.0
- 包管理器:
bun或npm均可(workspaces 仓库)
bash
# 安装依赖(二选一)
bun install
# 或
npm install常用命令(均为根目录 package.json 真实脚本):
| 命令 | 作用 |
|---|---|
npm run examples:start | 并行启动 6 个 dev server(Portal + 5 个子应用) |
npm run start:portal | 单独启动 Portal(端口 4200) |
npm run start:angular-sub | 单独启动 Angular 子应用(4201) |
npm run start:vue-sub | 单独启动 Vue 子应用(4202) |
npm run start:react-sub | 单独启动 React 子应用(4203) |
npm run start:wc-sub | 单独启动 Web Component 子应用(4204) |
npm run start:custom-sub | 单独启动纯 JS 子应用(4205) |
npm run demo | jsdom 无浏览器演示(Node 中跑完整生命周期) |
npm run examples:check | 示例 TypeScript 类型检查 |
演示账号
登录 Portal 后使用以下演示账号(定义于 examples/shared/mock-data.ts):
| 账号 | 密码 | 角色 | 权限概况 |
|---|---|---|---|
| admin | admin123 | admin、user | 全部 10 项能力(含 settings-manage、system-admin) |
| user | user123 | user | user-view、project-view、project-create、project-edit |
| guest | guest123 | guest | user-view、project-view(只读) |