WU FRAMEWORK / 官方文档

微前端。
同一个页面。

WU Framework 通过独立于框架的统一生命周期组合应用。每个应用保留自己的技术，WU 协调挂载和通信。WU CLI 为你准备入门项目。

在线体验 WU ↓创建第一个应用 →

官方文档WU / v4简体中文版

在此试用

点击 React，Vue 随即更新。

WU 4.0.0

点击“加一”。两个真实的微应用通过 WU 共享计数器。然后卸载 Vue，观察状态如何变化。

正在连接两个微应用…

逐步构建此示例 →体验窗口、拖放与状态保留 →探索更多示例 →

架构决策

配置与隔离。

对比指南 →

根据应用的加载、挂载和连接方式做选择。这些工具也可以结合使用。

决策项	WU Framework	single-spa	Webpack Module Federation
组合能力	生命周期、状态存储、事件和服务	生命周期与编排	远程模块加载与依赖共享
CSS 隔离	由 WU 根据配置管理 Shadow DOM	应用自行选择策略；可使用 Shadow DOM	由应用及渲染器决定
DOM 隔离	本演示中每个应用有独立的 Shadow Root；iframe 模式是另一种选择。	提供挂载容器，由应用决定是否使用 Shadow DOM。	模块联邦负责模块共享，DOM 容器由应用决定。
常见配置	WU CLI 生成宿主与应用。配置清单、授权和生命周期，无需 ModuleFederationPlugin。	配置根应用、注册子应用、激活规则与生命周期，并选择加载器和构建方案。	使用 webpack 时需配置 ModuleFederationPlugin、exposes/remotes 和 shared 策略。其他模块联邦宿主有各自的配置方式。

适用范围与技术资料

Shadow DOM 封装结构和 CSS 选择器，但不能作为防御恶意 JavaScript 的安全边界。这里列出的配置并非难度评分或生产力基准测试。

官方技术资料： webpack / ModuleFederationPlugin · single-spa / CSS · single-spa + Module Federation

代码与社区

参与 WU 的开发。

浏览官方仓库、分享可复现的示例，或联系开发者。

Forgejo 仓库需要登录。你也可以通过支持页面报告问题或提出建议。

内置 13 个适配器，支持扩展集成。

你也可以通过自定义生命周期连接其他技术。创建集成 →

前端开发

你想构建什么？

使用 JavaScript 或 TypeScript 编写页面。通过 WU 的状态、事件和服务连接产品的各项能力。

使用 WU 开发 Web 应用 →

逐步学习

01 / 开始

选择前端组合方式

架构

Microfrontends 与 microfronts

了解它们的含义、适用场景，以及仍需团队负责的决策。

了解架构 →集成

选择你的集成方式

查看内置的 13 个适配器，学习通过生命周期连接其他技术。

连接不同框架 →对比

WU 与 Module Federation 对比

根据实际集成需求比较 WU、Module Federation 和 single-spa。

评估不同方案 →

按你的需求继续

02 / 查阅与实践

我知道方法名称

查阅 API

搜索 mount、store.on 或 request，找到参数、结果、权限和使用示例。

签名 · 错误 · 清理我正在使用终端

使用 WU CLI

了解各命令生成的内容、应用编辑位置，以及如何开发、构建和提供项目。

CREATE · ADD · DEV · BUILD · SERVE 我想试一试

运行示例

选择示例、阅读代码并观察结果。按照指南把示例应用到自己的项目。

状态 · 事件 · 服务遇到了问题

定位原因

从现象入手：应用空白、事件被拒绝或请求没有响应。了解应检查什么以及如何修复。

现象 · 检查 · 解决

应用如何协作

查看架构 ↗

示例 / 商店● 两个应用

你的页面 / SHELL组织导航与空间

WU FRAMEWORK 挂载应用 · 共享数据与事件

商品目录REACT · 选择商品

购物车VUE · 显示选择结果

每个应用保留自身界面与依赖SHELL 将它们汇集起来

第一个可见结果

03 / 在你的项目中

NODE 24 + NPM

从一个应用开始。

CLI 生成 Astro 宿主页面和 React 微应用。指南解释生成的文件及计数器测试方式，下一步再添加 Vue。

阅读完整指南 →

终端wu 1.2.0

npm install --global @wu-framework/cli@1.2.0
wu create mi-plataforma --template react --shell astro
cd mi-plataforma
wu install
wu dev --native --port 3000 --no-open

在 StackBlitz 中打开

直接在浏览器中编辑 Astro、React 和 Vue。环境会安装示例依赖并启动预览。

此入门项目使用 JavaScript 工具。运行 WU 原生 CLI 请参阅本地开发指南。本地开发指南 →

↳启动后打开 http://127.0.0.1:3000 并选择 mi-plataforma。React 计数器应响应按钮 + 和 −.

想研究完整应用？请查看本门户的构建方式。选择 npm 或 CDN 时，请查阅版本与分发.

一起完善 WU

发现了问题？有新的想法？

你的使用体验能让 WU 变得更好。告诉我们遇到的问题，或支持项目的持续开发。

报告问题请我们喝杯咖啡更多参与方式

微前端。同一个页面。