添加第二个应用

从一个应用到两个

继续使用第一个微应用中的 mi-plataforma 项目。React 已在 Astro shell 内运行。现在添加名为 inspector 的 Vue 应用，并确认两个应用可从同一页面运行。

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

1. 将 Vue 添加到 workspace

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

wu add vue inspector --no-install
wu install

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

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

2. 启动并检查两个应用

重新启动服务器：

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

终端提示开始监听后，打开或刷新 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 加载错误。开发与重新加载介绍后续诊断。

3. 定位各应用代码

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

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

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

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

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

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

各文件配置什么

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

修改 workspace 请参阅配置与发现；配置运行时应用请参阅配置与 manifests。

下一步

继续准备生产版本，构建应用、提供输出并检查待发布内容。也可以先完成共享计数器，再用相同命令构建项目。