前端开发：使用 WU 可以构建什么

你的代码，你的界面

使用 WU，你可以将 Web 应用的前端开发为一组相互协作的业务能力。你使用 JavaScript 或 TypeScript 以及各应用的框架编写组件、表单、表格和页面。WU 连接这些应用，WU CLI 生成项目并准备开发流程。

该包包含 React、Vue、Angular、Svelte、Preact、Solid、Lit、Vanilla、Alpine、Qwik、Stencil、HTMX 和 Stimulus 的适配器。请在适配器参考中查看各自的契约。

对于其他技术，可以通过 wu.define 注册 mount 和 unmount，或使用 createWuAdapter 构建适配器。统一契约既能连接使用相同框架的应用，也能连接使用不同框架的应用。

例如，你可以保留 React 面板并添加 Angular 功能区，而不必重写前者。所有应用也可以都使用 React。合理的划分应基于报表、管理等产品能力，而不是让每个页面都使用不同框架。

以下场景说明如何组织产品。链接指向可以改造使用的指南和可运行示例；CLI 生成的是起点，并非已经完成的商店或 SaaS 产品。

仪表盘和 SaaS 面板

在仪表盘中，一个应用可以显示报表，另一个应用负责选择客户或日期范围。Shell 维护导航并为每个应用分配空间。将共享筛选条件保存在 WU store 中，让各视图观察变化；表格和表单自身的状态则保留在各自的渲染器内部。

从 React 与 Vue 共享计数器开始：它展示了如何读取数据、从两个应用更新数据，以及取消订阅。将计数器替换为产品的筛选条件，并把各视图连接到你的 API。检查卸载并重新挂载视图后，共享数据是否符合预期。

在线商店和商品目录

如果商品目录和购物车需要独立演进，可以将它们分开。目录通过数据或事件传递选择结果，购物车维护自己的界面表示。将商品标识和数量定义为公开契约，不要把目录的组件传给购物车。

应用间通信指南帮助你在事件、状态和带响应的调用之间做出选择。Shell 架构说明谁控制路由。商店后端必须验证价格、库存和订单；浏览器中的共享状态不能作为这些操作的最终依据。

内部工具和管理门户

内部门户可以组合由不同团队维护的库存、报表和支持应用。当一个应用需要请求某项操作并接收结果时，使用 contracts。在连接提供方与使用方之前，先约定输入数据、错误和版本兼容性。

应用间求和服务讲解请求、响应、验证、超时和提供方恢复。你可以将这种方式用于产品操作。用户授权和业务验证由你的应用及其后端负责；WU grants 控制对其 facade 的访问。

分阶段迁移应用

选择边界明确的一项能力，将其入口适配到 WU 生命周期，并保留用户使用的路由。先测试挂载和卸载，再迁移下一部分。如果组合不同框架，请查看 React 与 Angular及各适配器之间的差异。

创建第一个前端项目

安装 Node 24 和 npm 后，入门流程使用以下命令。请在目标目录尚不存在的位置执行创建操作：

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

打开 http://127.0.0.1:3000，选择 mi-plataforma，并检查 React 计数器是否响应。完整指南指出需要编辑的文件和每一步的预期结果。然后你可以添加其他应用，或查看 JavaScript 与 TypeScript 模板。

从第一个页面到可发布的应用

在拆分更多应用之前，先完成一项能力：交互、加载、错误、空状态和清理。从契约两端进行测试，并检查导航、焦点和样式。通过 API 文档查阅具体签名，在实验室中观察执行过程。

然后按照生产指南构建并检查待发布内容。如果一个团队能够协调交付全部功能，模块化应用可能已经足够；何时选择微前端解释了拆分的成本。