学习5 分钟阅读 · MARKDOWN ↗

第一个微应用

使用 CLI 1.2.0 创建包含 React 微应用的 Astro shell，并完成首次挂载验证。

你将获得什么

你将打开包含 React 应用的页面并操作计数器。WU 负责在页面内部显示该应用。 这个过程称为挂载微应用或微前端。

承载它的页面称为 shell。本流程用 Astro 构建 shell，用 React 构建微应用；自己的项目也可选择其他框架。

汇集两者的目录称为 workspace，通过 CLI，即终端的 wu 命令创建。CLI 准备文件并运行开发工具；wu-framework 软件包则是在浏览器挂载应用的 runtime。

1. 准备环境

使用 Node 24 和 npm。在准备创建项目的目录打开终端，检查 Node 版本：

node --version
npm --version

首个命令应输出 v24.x.x。安装本流程使用的 CLI，并检查版本：

npm install --global @wu-framework/cli@1.2.0
wu --version

最后一个命令应输出 wu 1.2.0。若找不到 wu 或使用其他 Node 版本，请先阅读安装与版本。

2. 创建 shell 和 React

mi-plataforma 目录此时应尚不存在。运行：

wu create mi-plataforma --template react --shell astro
cd mi-plataforma

命令生成 Astro shell 和 React 微应用。将用到以下部分：

mi-plataforma/
├── shell/                 # Página anfitriona Astro
├── mf-mi-plataforma/      # Microapp React
├── wu.config.json         # Configuración del workspace
└── package.json

应用名为 mi-plataforma，目录带 mf- 前缀。接下来的命令都在此根目录运行，即 wu.config.json 所在位置。所需配置已经生成。

3. 安装并启动

安装依赖，并等待命令成功完成：

wu install

随后启动服务器，保持终端打开：

wu dev --native --port 3000 --no-open

终端提示开始监听后，打开 http://127.0.0.1:3000。此模式下，WU 从端口 3000 提供 shell 和微应用。首次启动还会构建 Astro shell，可能需要更长时间。

4. 检查第一个应用

CLI 1.2.0 模板包含起始页和计数器：

打开页面后，找到 Overview、Welcome to WU 和应用 mi-plataforma。
点击导航或卡片中的 mi-plataforma，应看到 React、名称 mi-plataforma，以及 Interactions 下的计数器。
点击 +，数值从 0 变为 1；点击 − 返回 0。
点击 Overview 返回起始页。

你已用 WU 挂载微应用。 导航显示名称证明应用已注册，看到组件并操作计数器则证明它已加载且能够响应。

刚使用的 React 组件位于 mf-mi-plataforma/src/App.tsx，宿主页面位于 shell/src/pages/index.astro。

内容没有出现时

现象	检查内容
端口 3000 被占用	停止另一服务器，或用 `--port` 选择其他端口，并打开相应 URL。
`wu install` 以错误结束	启动服务器前先解决终端首个错误。参阅诊断。
页面响应 404	检查 Astro 初始构建是否失败。WU 正在监听不保证 shell 已构建。
shell 能打开，但 React 为空	检查浏览器首个控制台或 JavaScript 加载错误，继续阅读开发与重新加载。

更多版本、依赖与开发模式说明

本教程使用 WU CLI 1.2.0 和 Node 24。项目依赖在安装时解析，其版本不由 CLI 版本固定。请参阅版本与分发，了解本文档覆盖的版本。

wu install 汇总 shell 和应用依赖，保留根目录自定义脚本与元数据，并运行配置的包管理器。在实际使用依赖的包中声明它。共享版本范围、冲突和目录详见依赖与目录。

使用 --native 时，Astro 将 shell 构建到 shell/dist/，WU 提供该输出并在源码变化时重新构建。本示例不启动另一个 Astro 开发服务器。wu.config.json 的各应用端口用于替代模式 --vite；微应用编译仍使用 Node 工具。查看两种模式。

wu.config.json、wu.json 和 wu.init() 的区别见各文件配置什么。

下一步

继续添加第二个应用，保留本项目并在 React 旁挂载 Vue 应用。