# 添加第二个应用

用 Vue 扩展第一个 workspace，验证两个微应用，并区分 WU 协调的内容与各应用本地状态。

<span id="de-una-app-a-dos"></span>

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

## 从一个应用到两个

继续使用[第一个微应用](/zh-cn/docs/guides/quickstart/)中的 `mi-plataforma` 项目。React 已在 Astro shell 内运行。现在添加名为 `inspector` 的 Vue 应用，并确认两个应用可从同一页面运行。

先保留模板计数器，以便在修改组件前识别正确结果。

<span id="1-añadir-vue-al-workspace"></span>

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

## 1. 将 Vue 添加到 workspace

按 **Ctrl+C** 停止开发服务器。在包含 `wu.config.json` 的 `mi-plataforma/` 根目录运行：

```sh
wu add vue inspector --no-install
wu install
```

`add` 的顺序是**框架、名称**。第一条命令创建 `mf-inspector/`，并把新应用注册到 workspace 配置。`--no-install` 将安装留给第二条命令，该命令也会安装 Vue 依赖。

等待 `wu install` 成功完成再继续。

<span id="2-arrancar-y-comprobar-ambas-apps"></span>

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

## 2. 启动并检查两个应用

重新启动服务器：

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

终端提示开始监听后，打开或刷新 [http://127.0.0.1:3000](http://127.0.0.1:3000)。

1. 在 **Overview** 中确认出现 `mi-plataforma` 和 `inspector`。
2. 打开 **mi-plataforma**，应看到 **React** 及 **Interactions** 下的计数器。测试 **+** 和 **−**，结果为 **0 → 1 → 0**。
3. 打开 **inspector**，应看到 **Vue**、名称 `inspector` 和计数器。同样测试 **+** 和 **−**。
4. 返回 **Overview**。

**同一个 shell 已能显示两个框架的应用。** 无需把 React 组件转换为 Vue，也无需手动修改导航。

`inspector` 未出现时，检查是否在正确根目录运行 `add`，以及 `wu.config.json` 是否包含新应用。导航有条目但页面为空时，查看浏览器首个控制台或 JavaScript 加载错误。[开发与重新加载](/zh-cn/docs/cli/development/)介绍后续诊断。

<span id="3-localizar-el-código-de-cada-app"></span>

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

## 3. 定位各应用代码

| 想修改的内容 | 文件 |
| --- | --- |
| React 内容与计数器 | `mf-mi-plataforma/src/App.tsx` |
| Vue 内容与计数器 | `mf-inspector/src/App.vue` |
| 宿主页面及导航 | `shell/src/pages/index.astro` |

在对应应用目录编辑组件，保持开发服务器运行以检查变更。专属依赖声明在该应用的 `package.json`，随后从根目录运行 `wu install` 更新 workspace 安装。

<span id="qué-comparten-y-qué-conserva-cada-app"></span>

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

## 共享什么，各应用保留什么

两个应用使用同一个 shell 和负责加载、挂载的 WU runtime，各自保留组件、框架和计数器状态。**添加 Vue 不会自动连接两个计数器。**

需要应用协作时，根据任务选择通信方式：

- **事件：** 应用通知已发生的事实，例如“商品已添加”。
- **Store：** 多个应用读取并更新共享数据，例如购物车商品数量。
- **契约与 RPC：** 一个应用提供操作，另一个请求结果。

要连接这两个计数器，请按照 [React 与 Vue 共享计数器](/zh-cn/docs/guides/shared-counter/)。其中包含完整组件、两应用权限，以及同时显示它们的 Astro 页面。随后，[应用间求和](/zh-cn/docs/guides/rpc-between-apps/)会向同一 workspace 添加客户端和提供方。

<span id="qué-configura-cada-archivo"></span>

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

## 各文件配置什么

完成本流程无需编辑这些文件，但了解区别有助于后续自定义：

| 文件或调用 | 用途 |
| --- | --- |
| `wu.config.json` | 告诉 CLI shell 和应用位于何处、使用哪些框架，以及各自命令和端口。 |
| `wu.json` | 微应用清单，描述入口并可声明契约或权限。模板不创建源 `wu.json`；开发服务器可在请求时生成，构建写入生产版本。 |
| `wu.init({ ... })` | 配置浏览器运行时，说明 shell 可以从哪些 URL 加载哪些应用。生成的 shell 已执行此调用。 |

修改 workspace 请参阅[配置与发现](/zh-cn/docs/cli/configuration/)；配置运行时应用请参阅[配置与 manifests](/zh-cn/docs/framework/configuration/)。

<span id="siguiente-paso"></span>

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

## 下一步

继续[准备生产版本](/zh-cn/docs/guides/production/)，构建应用、提供输出并检查待发布内容。也可以先完成[共享计数器](/zh-cn/docs/guides/shared-counter/)，再用相同命令构建项目。