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

使用 JavaScript 或 TypeScript 及各应用自己的技术开发 Web 应用。了解 WU 的 13 个适配器，以及如何创建自定义集成。

<span id="tu-código-tus-interfaces"></span>

<span class="section-anchor" id="section-1"></span>

## 你的代码，你的界面

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

该包包含 **React、Vue、Angular、Svelte、Preact、Solid、Lit、Vanilla、Alpine、Qwik、Stencil、HTMX 和 Stimulus** 的适配器。请在[适配器参考](/zh-cn/docs/framework/api-adapters/)中查看各自的契约。

对于其他技术，可以通过 `wu.define` 注册 `mount` 和 `unmount`，或使用 [`createWuAdapter`](/zh-cn/docs/framework/api-adapters/#createwuadapter) 构建适配器。统一契约既能连接使用相同框架的应用，也能连接使用不同框架的应用。

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

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

<span id="dashboards"></span>

<span id="dashboards-y-paneles-saas"></span>

<span class="section-anchor" id="section-2"></span>

## 仪表盘和 SaaS 面板

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

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

<span id="ecommerce"></span>

<span id="tiendas-online-y-catálogos"></span>

<span class="section-anchor" id="section-3"></span>

## 在线商店和商品目录

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

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

<span id="internal-tools"></span>

<span id="herramientas-internas-y-portales-de-administración"></span>

<span class="section-anchor" id="section-4"></span>

## 内部工具和管理门户

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

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

<span id="migrar-una-aplicación-por-etapas"></span>

<span class="section-anchor" id="section-5"></span>

## 分阶段迁移应用

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

<span id="crea-tu-primer-proyecto-frontend"></span>

<span class="section-anchor" id="section-6"></span>

## 创建第一个前端项目

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

```sh
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](http://127.0.0.1:3000)，选择 **mi-plataforma**，并检查 React 计数器是否响应。[完整指南](/zh-cn/docs/guides/quickstart/)指出需要编辑的文件和每一步的预期结果。然后你可以[添加其他应用](/zh-cn/docs/guides/add-an-app/)，或查看 [JavaScript 与 TypeScript 模板](/zh-cn/docs/cli/templates/)。

<span id="de-la-primera-pantalla-a-una-aplicación-publicable"></span>

<span class="section-anchor" id="section-7"></span>

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

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

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