From 2499043df4e36ef04dab95344bc59639e3a4c94f Mon Sep 17 00:00:00 2001
From: cirry <812852553@qq.com>
Date: Sat, 20 Jun 2026 23:42:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=A5=BD=E4=BA=86vue2?=
 =?UTF-8?q?=E7=9A=84=E5=AD=90=E5=BA=94=E7=94=A8=E6=8E=A5=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore              |    4 +
 .idea/.gitignore        |    5 +
 .idea/microapp-main.iml |    8 +
 .idea/modules.xml       |    8 +
 docs/micro-app面试题.md |  574 ++++++++++++++++
 index.html              |   13 +
 package-lock.json       | 1412 +++++++++++++++++++++++++++++++++++++++
 package.json            |   22 +
 public/vite.svg         |    1 +
 src/App.vue             |  101 +++
 src/config/subApps.ts   |   51 ++
 src/main.ts             |   36 +
 src/router/index.ts     |   29 +
 src/views/ChildApp.vue  |  140 ++++
 src/views/Home.vue      |  167 +++++
 src/vite-env.d.ts       |   19 +
 tsconfig.json           |   24 +
 tsconfig.node.json      |   10 +
 vite.config.ts          |   24 +
 19 files changed, 2648 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .idea/.gitignore
 create mode 100644 .idea/microapp-main.iml
 create mode 100644 .idea/modules.xml
 create mode 100644 docs/micro-app面试题.md
 create mode 100644 index.html
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 public/vite.svg
 create mode 100644 src/App.vue
 create mode 100644 src/config/subApps.ts
 create mode 100644 src/main.ts
 create mode 100644 src/router/index.ts
 create mode 100644 src/views/ChildApp.vue
 create mode 100644 src/views/Home.vue
 create mode 100644 src/vite-env.d.ts
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 create mode 100644 vite.config.ts

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a4d699a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store
diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..10b731c
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# 默认忽略的文件
+/shelf/
+/workspace.xml
+# 基于编辑器的 HTTP 客户端请求
+/httpRequests/
diff --git a/.idea/microapp-main.iml b/.idea/microapp-main.iml
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/microapp-main.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..9eac2d5
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/microapp-main.iml" filepath="$PROJECT_DIR$/.idea/microapp-main.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/docs/micro-app面试题.md b/docs/micro-app面试题.md
new file mode 100644
index 0000000..a6bed94
--- /dev/null
+++ b/docs/micro-app面试题.md
@@ -0,0 +1,574 @@
+# @micro-zoe/micro-app 微前端面试题
+
+> 基于 Vue 3 + Vite 主应用搭建实战经验整理，涵盖从项目初始化、配置、到 bug 排查的全流程。
+
+---
+
+## 一、基础概念
+
+### Q1：什么是微前端？micro-app 相比其他方案有什么优势？
+
+**答：**
+微前端是一种将多个独立的前端应用组合成一个统一应用的架构模式。每个子应用可以独立开发、独立部署、使用不同的技术栈。
+
+`@micro-zoe/micro-app`（京东出品）的核心优势：
+- **零依赖**：不依赖 single-spa，完全自研
+- **类 WebComponent**：使用 `<micro-app>` 标签加载子应用，对开发者透明
+- **双沙箱模式**：同时支持 with 沙箱和 iframe 沙箱
+- **不限制技术栈**：主应用和子应用可以任意组合（Vue 2/3、React、原生 HTML 等）
+- **兼容 Vite**：通过 iframe 模式完美支持 Vite 构建的子应用
+
+| 对比维度 | micro-app | qiankun |
+|----------|-----------|---------|
+| 接入成本 | 低（类 WebComponent） | 中（需改造子应用入口） |
+| Vite 支持 | 原生支持（iframe 模式） | 需额外配置 |
+| 沙箱方案 | with + iframe 双模式 | 基于 Proxy 的沙箱 |
+| 包体积 | ~300KB | ~100KB |
+
+---
+
+### Q2：micro-app 主应用和子应用之间是如何隔离的？
+
+**答：**
+micro-app 提供**三层隔离**：
+
+1. **样式隔离**（`disable-scopecss`，默认开启）：
+   - 为子应用的每个样式规则自动添加 `micro-app[name=xxx]` 前缀，限制样式作用域
+
+2. **JS 沙箱隔离**（`disable-sandbox`，默认开启）：
+   - **with 沙箱**：通过 `with(window.proxy)` + `new Function()` 执行子应用 JS，将子应用的全局变量操作代理到隔离的 microWindow 上
+   - **iframe 沙箱**：将子应用放入 iframe 中运行，利用浏览器原生的 iframe 隔离
+
+3. **元素隔离**（`shadowDOM`，可选）：
+   - 将子应用放入 Shadow DOM，彻底隔离 DOM 树
+
+---
+
+## 二、项目搭建
+
+### Q3：使用 Vue 3 + Vite 搭建 micro-app 主应用需要哪些步骤？
+
+**答：**
+核心 4 步：
+
+```ts
+// 1. 安装依赖
+npm install @micro-zoe/micro-app vue-router@4
+
+// 2. vite.config.ts — 将 <micro-app> 注册为自定义元素
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => /^micro-app/.test(tag)
+        }
+      }
+    })
+  ],
+  server: { port: 8080 }
+})
+
+// 3. main.ts — 在 Vue 实例化前启动 micro-app
+import microApp from '@micro-zoe/micro-app'
+microApp.start({ /* 全局配置 */ })
+createApp(App).use(router).mount('#app')
+
+// 4. 页面中使用 <micro-app> 标签加载子应用
+<micro-app name="my-app" url="http://localhost:3000/" baseroute="/my-app" />
+```
+
+---
+
+### Q4：为什么要在 `vite.config.ts` 中配置 `isCustomElement`？
+
+**答：**
+`<micro-app>` 是一个**自定义 HTML 标签**，不是 Vue 组件。Vue 模板编译器默认会把所有非标准 HTML 标签当作 Vue 组件去寻找，找不到就会报警告：
+
+```
+[Vue warn]: Failed to resolve component: micro-app
+```
+
+通过 `isCustomElement: (tag) => /^micro-app/.test(tag)` 告诉编译器：以 `micro-app` 开头的标签是自定义元素，跳过 Vue 组件解析。
+
+**延伸**：如果子应用中也使用了 `<micro-app>`（嵌套微前端），同样需要配置。
+
+---
+
+### Q5：主应用路由如何设计才能正确匹配子应用？
+
+**答：**
+使用 Vue Router 的**通配符** `:page*` 匹配子应用所有内部路由：
+
+```ts
+const routes = [
+  { path: '/', redirect: '/home' },
+  { path: '/home', component: () => import('@/views/Home.vue') },
+  // 关键：:page* 匹配 /child-app 及其下所有子路由
+  { path: '/child-app/:page*', component: () => import('@/views/ChildApp.vue') }
+]
+```
+
+**为什么用 `:page*` 而不是 `*`？**
+- `*` 只在 Vue Router 3 中可用
+- Vue Router 4 中必须使用 `:page*`（或 `:pathMatch(.*)*`）来匹配多级路径
+- 这样 `/child-app/page1`、`/child-app/a/b/c` 都能被正确捕获
+
+---
+
+## 三、沙箱机制（重点 Bug 来源）
+
+### Q6：micro-app 的两种沙箱模式有什么区别？如何选择？
+
+**答：**
+
+| 特性 | with 沙箱 | iframe 沙箱 |
+|------|-----------|-------------|
+| 配置 | `iframe: false`（默认） | `iframe: true` |
+| 原理 | `with(window.proxy)` + `new Function()` | 浏览器原生 iframe |
+| ES Module | ❌ 不支持 `import`/`export` | ✅ 原生支持 |
+| 性能 | 较快（无额外渲染） | 略慢（需创建 iframe） |
+| 隔离性 | 中等（Proxy 代理） | 强（浏览器原生隔离） |
+| 调试体验 | 较好（同 document） | 较差（跨 iframe） |
+| 适用场景 | Webpack 构建的 UMD 应用 | **Vite 构建的应用** |
+
+**选择原则：**
+- **Vite 子应用 → 必须 `iframe: true`**
+- Webpack UMD 子应用 → `iframe: false` 即可
+- 对样式/JS 隔离要求极高的场景 → `iframe: true`
+
+---
+
+### Q7：遇到 `Cannot use import statement outside a module` 报错，是什么原因？如何解决？
+
+**答：**
+这是 micro-app 主应用对接 Vite 子应用时**必踩的坑**。
+
+**报错堆栈：**
+```
+[micro-app] app vue2-app: {
+  error: SyntaxError: Cannot use import statement outside a module
+  at new Function (<anonymous>)
+}
+```
+
+**根因分析：**
+1. Vite 开发服务器输出的 JS 是 `<script type="module">` 格式的 ES Module
+2. micro-app 默认的 **with 沙箱** 使用 `new Function()` 来执行子应用的 JS 代码
+3. `new Function()` 创建的函数运行在「非模块」作用域，无法解析 `import`/`export` 语法
+
+**解决方案：**
+```ts
+// src/config/subApps.ts
+{
+  name: 'vue2-app',
+  url: 'http://localhost:5173/',
+  baseroute: '/child-app',
+  iframe: true,  // ← 关键：开启 iframe 沙箱
+}
+```
+
+**为什么 iframe 能解决？**
+iframe 是浏览器原生的独立文档环境，Vite 的 `<script type="module">` 在 iframe 中可以正常执行。
+
+---
+
+### Q8：`new Function()` 和 `eval()` 有什么区别？为什么 micro-app 用 `new Function()`？
+
+**答：**
+
+| 特性 | `eval()` | `new Function()` |
+|------|----------|-------------------|
+| 作用域 | 访问当前局部作用域 | 只能访问全局作用域 |
+| 性能 | 慢（影响局部变量优化） | 较快（引擎可优化） |
+| 安全性 | 较低（泄漏局部变量） | 较高（作用域隔离） |
+
+micro-app 选择 `new Function()` 的原因：
+- 它创建的函数只在全局作用域执行，配合 `with(window.proxy)` 可以精确控制子应用对全局变量的访问
+- `eval()` 会渗透到调用方的局部变量，无法做到完全隔离
+
+**但局限性也很明显：** `new Function()` 无法处理 ES Module 语法，这就是为什么 Vite 子应用必须使用 iframe 模式。
+
+---
+
+## 四、TypeScript 类型问题
+
+### Q9：micro-app 的 `lifeCycles` 回调中，为什么 `e.name` 会报 TS 类型错误？
+
+**答：**
+这是 TypeScript 类型定义与实际使用的差异问题。
+
+**错误代码：**
+```ts
+lifeCycles: {
+  created(e) {
+    console.log(e.name) // TS2339: Property 'name' does not exist on type 'CustomEvent<any>'
+  }
+}
+```
+
+**根因：**
+根据 `@micro-zoe/micro-app` 的类型定义文件 `global.d.ts`：
+
+```ts
+interface lifeCyclesType {
+  created?(e: CustomEvent, appName: string): void
+  beforemount?(e: CustomEvent, appName: string): void
+  // ...
+}
+```
+
+生命周期回调接收**两个参数**：第一个是 `CustomEvent` 事件对象，**第二个才是 `appName` 字符串**。
+
+**正确写法：**
+```ts
+lifeCycles: {
+  created(_e, appName) {
+    console.log(`子应用 ${appName} 被创建`)
+  }
+}
+```
+
+---
+
+### Q10：`vue-tsc --noEmit` 在 CI/CD 中有什么作用？我们遇到了什么类型错误？
+
+**答：**
+`vue-tsc --noEmit` 是 Vue 项目的类型检查命令：
+- 只做类型检查，不输出编译产物
+- 相当于 `tsc --noEmit`，但额外支持 `.vue` 文件
+
+我们在项目中遇到了两类类型错误：
+
+1. **lifeCycles 回调参数类型错误**：`e.name` 不存在于 `CustomEvent` 类型 → 改用第二个参数 `appName`
+2. **未使用的导入**：`getSubAppConfig` 在 `ChildApp.vue` 中导入但未使用 → 移除无用导入
+
+**配置建议：** 在 `package.json` 中将类型检查加入构建流程：
+
+```json
+{
+  "scripts": {
+    "build": "vue-tsc --noEmit && vite build"
+  }
+}
+```
+
+---
+
+## 五、子应用容器与通信
+
+### Q11：`<micro-app>` 标签有哪些核心属性？各有什么作用？
+
+**答：**
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| `name` | `string` | **必填**，子应用唯一标识，字母开头 |
+| `url` | `string` | **必填**，子应用入口地址（HTML 路径） |
+| `baseroute` | `string` | 路由前缀，主应用分配给子应用的路由基路径 |
+| `iframe` | `boolean` | 是否使用 iframe 沙箱（Vite 子应用必须开启） |
+| `keep-alive` | `boolean` | 保活子应用，切换路由时不销毁 |
+| `router-mode` | `string` | 路由模式：`native`（原生同步）/ `native-scope`（带作用域） |
+| `disable-scopecss` | `boolean` | 禁用样式隔离 |
+| `disable-sandbox` | `boolean` | 禁用 JS 沙箱（调试时可用） |
+| `data` | `object` | 向子应用传递的初始数据 |
+| `shadowDOM` | `boolean` | 是否使用 Shadow DOM |
+
+---
+
+### Q12：主应用如何向子应用传递数据？有哪几种方式？
+
+**答：**
+三种方式：
+
+**方式一：通过 `data` 属性（初始化传参）**
+```vue
+<micro-app name="app1" url="..." :data="{ token: 'abc', userId: 1 }" />
+```
+```ts
+// 子应用接收
+const data = window.microApp?.getData()
+```
+
+**方式二：通过 `microApp.setData()` API（动态传参）**
+```ts
+import microApp from '@micro-zoe/micro-app'
+microApp.setData('app1', { path: '/detail' })
+```
+```ts
+// 子应用监听
+window.microApp?.addDataListener((data) => {
+  console.log('收到数据:', data)
+  if (data.path) router.push(data.path)
+}, true) // autoTrigger = true，初始化时立即触发一次
+```
+
+**方式三：通过 `EventCenterForMicroApp`（双向通信）**
+```ts
+// 主应用
+import { EventCenterForMicroApp } from '@micro-zoe/micro-app'
+const eventCenter = new EventCenterForMicroApp('app1')
+eventCenter.dispatch({ type: '通知', payload: {} })
+```
+```ts
+// 子应用
+window.microApp?.dispatch({ type: '回复', payload: {} })
+```
+
+---
+
+### Q13：`keep-alive` 保活机制的原理是什么？有什么注意事项？
+
+**答：**
+原理：当 `<micro-app>` 元素从 DOM 中移除时（如路由切换），不执行 `unmount()`，而是调用 `hiddenKeepAliveApp()` 将子应用隐藏。当元素重新插入 DOM 时，调用 `showKeepAliveApp()` 恢复显示。
+
+**优点：** 避免重复加载资源，保持子应用状态
+
+**注意事项：**
+- 保活的子应用仍然占用内存，需注意内存泄漏
+- 子应用的定时器、事件监听需要在 `unmount` 生命周期中手动清理
+- 用 `microApp.getActiveApps({ excludeHiddenApp: false })` 可以查看所有活跃应用（包括隐藏的保活应用）
+
+---
+
+## 六、生命周期
+
+### Q14：micro-app 子应用加载经历了哪些生命周期？顺序是什么？
+
+**答：**
+
+```
+主应用生命周期（全局 lifeCycles）：
+created → beforemount → (beforeshow) → mounted → (afterhidden) → unmount
+
+子应用内部生命周期（window 上的钩子）：
+window.mount() → window.unmount()
+```
+
+**完整流程：**
+
+| 阶段 | 全局回调 | 说明 |
+|------|----------|------|
+| 资源加载完成 | `created` | HTML 和静态资源已下载 |
+| 挂载前 | `beforemount` | 沙箱准备就绪，即将渲染 |
+| 挂载前（keep-alive 恢复） | `beforeshow` | 保活应用恢复显示前触发 |
+| 渲染完成 | `mounted` | 子应用已渲染到容器中 |
+| 保活隐藏后 | `afterhidden` | 保活应用被隐藏后触发 |
+| 卸载 | `unmount` | 子应用被销毁 |
+| 报错 | `error` | 加载或执行出错时触发 |
+
+---
+
+### Q15：全局 `lifeCycles` 和子应用内部的 `mount/unmount` 有什么区别？
+
+**答：**
+
+| 维度 | 全局 lifeCycles | 子应用 mount/unmount |
+|------|-----------------|---------------------|
+| 定义位置 | 主应用 `microApp.start()` | 子应用 `window['micro-app-xxx']` |
+| 关注点 | 框架层面的加载状态 | 子应用业务层面的渲染状态 |
+| 参数 | `(e: CustomEvent, appName: string)` | 无参数（或接收主应用传递的配置） |
+| 典型用途 | 全局 loading 控制、埋点 | 初始化 Vue Router、挂载根组件 |
+
+```ts
+// 子应用（Vue 2）入口 — 导出生命周期
+if (window.__MICRO_APP_ENVIRONMENT__) {
+  window[`micro-app-${window.__MICRO_APP_NAME__}`] = {
+    mount() {
+      instance = new Vue({ router, render: h => h(App) }).$mount('#child-app-root')
+    },
+    unmount() {
+      instance.$destroy()
+      instance.$el.innerHTML = ''
+    }
+  }
+} else {
+  // 独立运行时直接渲染
+  new Vue({ router, render: h => h(App) }).$mount('#app')
+}
+```
+
+---
+
+## 七、Vue 2 子应用对接
+
+### Q16：Vue 2 Webpack 子应用需要做哪些改造才能接入 micro-app？
+
+**答：**
+需要 4 处改造：
+
+**1. webpack 配置 — UMD 输出**
+```js
+// vue.config.js 或 webpack.config.js
+module.exports = {
+  output: {
+    libraryTarget: 'umd',
+    library: 'vue2App'
+  }
+}
+```
+
+**2. devServer 配置 — 跨域**
+```js
+module.exports = {
+  devServer: {
+    port: 3000,
+    headers: {
+      'Access-Control-Allow-Origin': '*'
+    }
+  }
+}
+```
+
+**3. 入口文件 — 导出生命周期**
+```ts
+let instance = null
+
+function mount() {
+  instance = new Vue({ router, render: h => h(App) }).$mount('#child-app-root')
+}
+
+function unmount() {
+  instance.$destroy()
+  instance.$el.innerHTML = ''
+}
+
+if (window.__MICRO_APP_ENVIRONMENT__) {
+  window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
+} else {
+  mount()
+}
+```
+
+**4. 路由 base — 动态适配**
+```ts
+const router = new VueRouter({
+  mode: 'history',
+  base: window.__MICRO_APP_BASE_ROUTE__ || '/',
+  routes
+})
+```
+
+---
+
+### Q17：子应用挂载的 DOM 元素 id 为什么不能用 `#app`？
+
+**答：**
+因为主应用已经使用了 `<div id="app"></div>`。如果子应用也挂载到 `#app`，会与主应用的根节点冲突，导致：
+
+- 子应用覆盖主应用内容
+- 样式污染
+- 路由混乱
+
+**正确做法：** 子应用使用独立的 id：
+
+```html
+<!-- 子应用的 index.html -->
+<div id="child-app-root"></div>
+```
+
+```ts
+// 子应用入口
+new Vue({ ... }).$mount('#child-app-root')
+```
+
+---
+
+## 八、排错与调试
+
+### Q18：子应用加载白屏，如何排查？
+
+**答：**
+按以下顺序排查：
+
+1. **检查跨域**：浏览器 Network 面板看子应用资源是否被 CORS 阻止 → 确认子应用 devServer 配置了 `Access-Control-Allow-Origin: *`
+
+2. **检查控制台错误**：
+   - `Cannot use import statement outside a module` → 子应用是 Vite 项目，需配置 `iframe: true`
+   - `Failed to resolve component: micro-app` → Vite 未配置 `isCustomElement`
+   - `Unexpected token '<'` → 子应用静态资源路径错误，检查 `url` 配置
+
+3. **检查沙箱模式**：临时设置 `disable-sandbox: true` 确认是否是沙箱引起的问题
+
+4. **检查子应用生命周期**：在 `created`/`mounted`/`error` 回调中打印日志，确认子应用加载到哪一步
+
+5. **查看 micro-app 日志**：启用 `__DEV__` 模式可看到详细日志
+
+---
+
+### Q19：为什么 Vite 子应用的静态资源会 404？
+
+**答：**
+两个常见原因：
+
+**1. 资源路径使用绝对路径：**
+```html
+<!-- 子应用中这样写会 404，因为主应用在 localhost:8080 -->
+<script src="/assets/index.js"></script>
+<!-- 实际应该请求子应用 localhost:5173/assets/index.js -->
+```
+解决：子应用 Vite 配置 `base` 或使用相对路径
+
+**2. `baseroute` 与 `base` 不匹配：**
+```ts
+// 主应用
+<micro-app baseroute="/child-app" />
+
+// 子应用 vite.config.ts
+export default defineConfig({
+  base: '/child-app/'  // 必须与 baseroute 一致
+})
+```
+
+---
+
+## 九、实战总结
+
+### Q20：这套微前端架构在生产环境中部署需要注意什么？
+
+**答：**
+
+1. **子应用独立部署**：每个子应用有自己独立的 CI/CD 流水线，版本号独立管理
+
+2. **统一资源路径管理**：通过环境变量管理各子应用的 URL：
+   ```ts
+   export const subApps = [{
+     name: 'vue2-app',
+     url: import.meta.env.VITE_CHILD_APP_URL || 'http://localhost:5173/',
+     baseroute: '/child-app',
+   }]
+   ```
+
+3. **Nginx 配置**：
+   - 所有子应用必须配置 CORS 头
+   - 主应用和子应用建议部署在**同源**下（同协议、同域名、同端口），可避免大量跨域问题
+   - 如果异构部署，需要配置反向代理统一转发
+
+4. **公共依赖提取**：将 Vue、Vue Router 等公共依赖配置为 external，避免重复加载：
+   ```ts
+   // vite.config.ts
+   build: {
+     rollupOptions: {
+       external: ['vue', 'vue-router']
+     }
+   }
+   ```
+
+5. **灰度发布**：利用 `microApp.start()` 的 `plugins.global` 机制，可以在加载子应用 HTML 时做 A/B 测试控制
+
+6. **错误兜底**：配置全局 `error` 回调 + 子应用容器的 `@error` 事件，展示友好的降级页面
+
+---
+
+## 附录：快速检查清单
+
+| 检查项 | 正确配置 |
+|--------|----------|
+| Vite isCustomElement | `(tag) => /^micro-app/.test(tag)` |
+| Vite 子应用沙箱 | `iframe: true`（必须） |
+| Webpack 子应用沙箱 | `iframe: false` 即可 |
+| 子应用跨域 | `Access-Control-Allow-Origin: *` |
+| 子应用挂载 id | 不能用 `#app`，需独立命名 |
+| 路由通配符（Vue Router 4） | `:page*`，不是 `*` |
+| lifeCycles 回调参数 | `(e: CustomEvent, appName: string)` |
+| 子应用路由 base | `window.__MICRO_APP_BASE_ROUTE__ \|\| '/'` |
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a90380f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MicroApp 主应用</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..1962005
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1412 @@
+{
+  "name": "microapp-main",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "microapp-main",
+      "version": "1.0.0",
+      "dependencies": {
+        "@micro-zoe/micro-app": "^1.0.0-rc.31",
+        "vue": "^3.4.0",
+        "vue-router": "^4.3.0"
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^5.0.0",
+        "typescript": "^5.4.0",
+        "vite": "^5.4.0",
+        "vue-tsc": "^2.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz",
+      "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz",
+      "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@micro-zoe/micro-app": {
+      "version": "1.0.0-rc.31",
+      "resolved": "https://registry.npmjs.org/@micro-zoe/micro-app/-/micro-app-1.0.0-rc.31.tgz",
+      "integrity": "sha512-WRS1xQUOndXYkiDGgmJaH6rQQD/HPHy8jcfPx2bMUE8VVIGj+XpWfhjrfIubOM8/BfHWct/pXic1zM/PkzZaoQ==",
+      "license": "MIT"
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.2.tgz",
+      "integrity": "sha512-6o7ZLZK+BeenkZCFNDXqpbjw9bD6nuWonvS/lwQJp7NoVVxm6p3qE7qQ5jGuBjiFsgvqjD8mZAU5oWxTmbOeOg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.2.tgz",
+      "integrity": "sha512-BaH7BllCACHoH1LguOU56UItGfUWjujlO65kS9LAodViaN4bwIKd7oeW/ZHJ/4ljr/7MIiENnNy3HJ0zXv8Zkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.2.tgz",
+      "integrity": "sha512-v39RCCvj4He82I9sFmk+M1VZ0PLM9sfsLVikjfx2hYBNALhrrOR2D3JjQA6AhlaSOgcR+RzrKY7e1+bT6SUO/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.2.tgz",
+      "integrity": "sha512-yl0y2vq3S3lHeuXhEdss6TWfKW8vkujImO12tn4ZkG/4oghr09LvdYm2RElVjokTQiUvDUGXLGsYeLqUMCKpGA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.2.tgz",
+      "integrity": "sha512-tT4pvt4qXD+vEoezupCWi+a1F0vvDiksiHc+PxRlYTOH1I6/X4id9jPxTP+Fg+545euaFT1jJVs4CEdHZAU1vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.2.tgz",
+      "integrity": "sha512-6nU5F2wCW+qvCBhTn1pdIU3bzsIoF7EUwsCDRxilWGprQR6yd508YnH9+OKFCwpfS8pjZqDUmnCAr7exax0XCg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.2.tgz",
+      "integrity": "sha512-n1GJHPOvpIfhi3TmrCeh6S6URt9BFCt0KQE3qvexyGCTAKpR4Lg+eWvNZEqu7epxwus/8ElT3hacYEucm49SZg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.2.tgz",
+      "integrity": "sha512-JqgflS8wEB+UXV/vS1RpRbifGBeN4D5lz8D8oOFbFZw4vedvdOgCFAjfBmIMdW3yL10XpQQ0Ambepw6MXrhOnA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.2.tgz",
+      "integrity": "sha512-wnFJkogWvN4jm/hQRF2UBaeUmk20j5+DmHvoyWii2b8HJDyvz1MF2OU/6ynXt2KR63rbZLWkFpoytpdc/yBuSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.2.tgz",
+      "integrity": "sha512-HVu2bp0zhvJ8xHEV9+UUs7S90VadmBSY3LcIMvozbPo4AuMGDWlz3ymHLHZPX4hR67TKTt8Qp5PJ5RBg/i+RMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.2.tgz",
+      "integrity": "sha512-mQqqAV8QaoSgr9I2fKDLY2BAVvmKjWoGiu/cSYQonsLvtqwEn1E4QYfnCOcp5zoEqNhsDYin1s6jx/VJmrxlZg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.2.tgz",
+      "integrity": "sha512-IxKLoxCQ2IWi6bT2akyDUBGsOImDKB+sPp4EsTmwFQ/fMwpCKm8uLSSgP/Kx/QYUgKis6SEZ5/Nlhup0DIA0PQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.2.tgz",
+      "integrity": "sha512-Mk5ha2RQSgyFfmYYLkBpPnUk8D8FriBxesO1u9O75X0mHgXL1UQcH5Itl2lurWL2tj0RxV9b9tJgipac0hRY9A==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.2.tgz",
+      "integrity": "sha512-CjvEnqJL/0/TQ3TXX3OPIJ/kmBellrWd4heXUmHeJlTnmwjKpSJzoehLaL6Xk0ZnMHBu9dZuFADNOrtjF4v+2w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.2.tgz",
+      "integrity": "sha512-1SiZbzwdkaDURsew/tSOrooKiYy7EQGT6m8ufavAi9NEyQb/6VuIxFXAL1fqa4iZe3g4NbNk4P7J32z2tw5Mgg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.2.tgz",
+      "integrity": "sha512-nQts12zJ3NQRoE6uYljOH89v7szzLDvG2JD/vsX+vGXU8w/At1GowTZ5/7qeFQ8m7L55rpR8Okugnuo5bgjy2Q==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.2.tgz",
+      "integrity": "sha512-E9/ll019jhPIJgpzfZoIkBGhcz+kKNgVWYRY0zr9srBdPPFVpvOKW8VaJKUbeK+eZXyQF9ltME+Kk6affeaPgg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.2.tgz",
+      "integrity": "sha512-5BqxR/pshjey51iliyzTD5Xi3EN0aLmQ2lZ3lvefVV9c82BvrLo2/6OT55iifpWBufs6kdwWbuOKS841DrmK9A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.2.tgz",
+      "integrity": "sha512-uNN83XxQrRAh/w0/pmAfibcwyb6YWt4gP+dpnQKPVJshAloQ785ii8CT8ZCIxkGg9opVsvAlGhFitSm6D1Jjpg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.2.tgz",
+      "integrity": "sha512-srjEIxSH3LRnJN6THczDHWQplqEMFiAJrTab0msUryh9kwNpkICf3Ea6q6MN/2cZwRFUNx5w+h6Hpi4QuHS6Zg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.2.tgz",
+      "integrity": "sha512-8hOJnxgbyObnCm5AlRA3A931xX19xq80RjVTKgJOvEKWqJruP/Uf12IbAOaDjjEXYRewwHLfmF0YRIdK3OwKWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.2.tgz",
+      "integrity": "sha512-mmF4AY1i0hG/bLWUctUq59gtmgaSIRa3cu/A3JFRp/sCNEme2bgDEiDS22P9FbnJB8NJNF4jPJiSP5RHQpUTDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.2.tgz",
+      "integrity": "sha512-DZgkknc6jhHrk46V25vbAM0zZkyP0nSDkJB8/dRkLTxv470dOmWDqGoEJl/9A0dFfS7yE3REOwNDxpHwSLSt0Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.2.tgz",
+      "integrity": "sha512-T6xr6ucWSFto+VGajA8YH26LdpHRuP4YLHEKAtCWvJDOlnmWcDZVCI2Jmjr+IFHDlt2zRaTAKE4tfjTaWLgJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.2.tgz",
+      "integrity": "sha512-BfzEnDJOt9T8M989/lA37EcJgat01wLRnoi5dQf3QzOH7jzpqTAzdDbVfRljVr5r+jzKqpbHeyOfAaXxAd0PAA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
+      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0",
+        "vue": "^3.2.25"
+      }
+    },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.15.tgz",
+      "integrity": "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.15"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.15.tgz",
+      "integrity": "sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.15",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.15.tgz",
+      "integrity": "sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.15",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.38.tgz",
+      "integrity": "sha512-s99aGxWYig9ErHbct27KXEGhrBYlRI6c4MwAgXErOAbX9xiW37/uMa+XUDO69zLz83dng8UUZ70CTOJrLrYrEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@vue/shared": "3.5.38",
+        "entities": "^7.0.1",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.38.tgz",
+      "integrity": "sha512-JTqp25l8aFfJYF7/KmsXZjAxJz7T+SjmTJLoXVjHtc2BrSgSiW2n9Aem/cWq1OPe68A8JL06B3eVdhlP0H4TVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-core": "3.5.38",
+        "@vue/shared": "3.5.38"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.38.tgz",
+      "integrity": "sha512-DuA2GiZawSEW442iw/9+Fkol8hTgb4Ke5KkhmSry65QA7YuyMbIdy8p0XZRMvNwJdgRz307W8g1CSzdvS4nuNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.7",
+        "@vue/compiler-core": "3.5.38",
+        "@vue/compiler-dom": "3.5.38",
+        "@vue/compiler-ssr": "3.5.38",
+        "@vue/shared": "3.5.38",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.15",
+        "source-map-js": "^1.2.1"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.38.tgz",
+      "integrity": "sha512-7s+W5Gc42FGxZMcuwl8H5B29T8BJPMdBT7KHFE+BbAuZ/iTEdTtv7z2XiMjiaUUw4w3ZcCEdHs36RuYJ2VA7bA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.38",
+        "@vue/shared": "3.5.38"
+      }
+    },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
+    "node_modules/@vue/language-core": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.12.tgz",
+      "integrity": "sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.15",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^1.0.3",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.38.tgz",
+      "integrity": "sha512-pG6LV/NDNRbKizcUjFFLAfjaL8mcv4DmR9avNcUw2gDHBzZneuS2TWCmp633ynzxz9YYKNeEPK2I8Wraqy2HUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.38"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.38.tgz",
+      "integrity": "sha512-iyW8WVfF1CpCXxncZY5Ei6rSd6oZr5DgEom//fUjRBRl56AXPD+s9ATvukRt77ZFTuYlnVA1bxY+dJB94tWVYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.38",
+        "@vue/shared": "3.5.38"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.38.tgz",
+      "integrity": "sha512-apX2wt9sdfDshS+a2xueFZLVpt0GkRJZSoPmrW/SA4yzXTznhfcMVW59gr7h4YQeY0vJhdJkk2rsIDwgfFgC5A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.38",
+        "@vue/runtime-core": "3.5.38",
+        "@vue/shared": "3.5.38",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.38.tgz",
+      "integrity": "sha512-vue8vbf2QlV4quHqzwmJy6dWfmRhP1J8l4wtZg60CL6VoKqcPY2oe7may3+1d9qfpedjK5PRLFqd5k3Isj9mUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.38",
+        "@vue/shared": "3.5.38"
+      },
+      "peerDependencies": {
+        "vue": "3.5.38"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.38.tgz",
+      "integrity": "sha512-FTW0AFZNaK5/mOqvGBwVfUlNLU38TiQn4+DQgIFUnrBBJQ1crMJ82yeGQLV5jyKFsO8yRukpbuP7x+nRbH6aug==",
+      "license": "MIT"
+    },
+    "node_modules/alien-signals": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-1.0.13.tgz",
+      "integrity": "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/entities": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "license": "MIT"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.14.tgz",
+      "integrity": "sha512-U9kYi5bpVMEI31yC8iw4bJJp0avcHXA0W8/wNfLfnvJYzihQo2ZRPYPvpAAd570HAcCBjCTN7vnr+v4StKl1IQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.15",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.12",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.62.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz",
+      "integrity": "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.62.2",
+        "@rollup/rollup-android-arm64": "4.62.2",
+        "@rollup/rollup-darwin-arm64": "4.62.2",
+        "@rollup/rollup-darwin-x64": "4.62.2",
+        "@rollup/rollup-freebsd-arm64": "4.62.2",
+        "@rollup/rollup-freebsd-x64": "4.62.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.62.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.62.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.62.2",
+        "@rollup/rollup-linux-arm64-musl": "4.62.2",
+        "@rollup/rollup-linux-loong64-gnu": "4.62.2",
+        "@rollup/rollup-linux-loong64-musl": "4.62.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.62.2",
+        "@rollup/rollup-linux-ppc64-musl": "4.62.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.62.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.62.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.62.2",
+        "@rollup/rollup-linux-x64-gnu": "4.62.2",
+        "@rollup/rollup-linux-x64-musl": "4.62.2",
+        "@rollup/rollup-openbsd-x64": "4.62.2",
+        "@rollup/rollup-openharmony-arm64": "4.62.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.62.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.62.2",
+        "@rollup/rollup-win32-x64-gnu": "4.62.2",
+        "@rollup/rollup-win32-x64-msvc": "4.62.2",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vue": {
+      "version": "3.5.38",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.38.tgz",
+      "integrity": "sha512-vAMKHfImQlYSy0C+PBue4s3ERZ2xGKfgZg5GXAsLInq1dyh2H78ILVP5sK0KPFPVW4kv+OGCIvBEondcjpZp7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.38",
+        "@vue/compiler-sfc": "3.5.38",
+        "@vue/runtime-dom": "3.5.38",
+        "@vue/server-renderer": "3.5.38",
+        "@vue/shared": "3.5.38"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/vue-tsc": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.12.tgz",
+      "integrity": "sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "2.4.15",
+        "@vue/language-core": "2.2.12"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..40c5c1c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "microapp-main",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@micro-zoe/micro-app": "^1.0.0-rc.31",
+    "vue": "^3.4.0",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.4.0",
+    "vue-tsc": "^2.0.0"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..5509758
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..a3e675c
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,101 @@
+<template>
+  <div id="main-app">
+    <header class="app-header">
+      <div class="logo" @click="$router.push('/')">
+        <h1>MicroApp 主应用</h1>
+      </div>
+      <nav class="nav-links">
+        <router-link to="/home">首页</router-link>
+        <router-link to="/child-app">Vue2 子应用</router-link>
+      </nav>
+    </header>
+    <main class="app-main">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 根组件 — 提供全局布局（头部导航 + 内容区）
+</script>
+
+<style>
+/* 全局样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
+  color: #333;
+  background: #f5f6f7;
+}
+
+#app {
+  height: 100%;
+}
+
+#main-app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* 头部导航 */
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 56px;
+  padding: 0 24px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  flex-shrink: 0;
+}
+
+.logo {
+  cursor: pointer;
+}
+
+.logo h1 {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 1px;
+}
+
+.nav-links {
+  display: flex;
+  gap: 8px;
+}
+
+.nav-links a {
+  color: rgba(255, 255, 255, 0.85);
+  text-decoration: none;
+  padding: 6px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+.nav-links a:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.nav-links a.router-link-active {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  font-weight: 500;
+}
+
+/* 主内容区 */
+.app-main {
+  flex: 1;
+  overflow: auto;
+}
+</style>
diff --git a/src/config/subApps.ts b/src/config/subApps.ts
new file mode 100644
index 0000000..5d56198
--- /dev/null
+++ b/src/config/subApps.ts
@@ -0,0 +1,51 @@
+/**
+ * 子应用配置列表
+ *
+ * 后续对接 Vue 2 子应用时，在此处添加/修改配置即可
+ *
+ * @see https://jd-opensource.github.io/micro-app/docs.html#/configure
+ */
+export interface SubAppConfig {
+  /** 应用名称，全局唯一，字母开头 */
+  name: string
+  /** 子应用地址（开发环境填写 devServer 地址） */
+  url: string
+  /** 基座分配给子应用的路由前缀 */
+  baseroute: string
+  /** 是否使用 iframe 沙箱（Vite 子应用必须开启；Webpack 子应用可选） */
+  iframe?: boolean
+  /** 是否保活子应用，避免重复加载 */
+  keepAlive?: boolean
+  /** 路由模式：native | native-scope */
+  routerMode?: 'native' | 'native-scope'
+  /** 是否禁用样式隔离 */
+  disableScopecss?: boolean
+  /** 是否禁用沙箱 */
+  disableSandbox?: boolean
+}
+
+// ============================================================
+// 当前对接的子应用列表
+// 后续对接 Vue 2 项目时，修改 url 为实际的子应用地址
+// ============================================================
+
+export const subApps: SubAppConfig[] = [
+  {
+    name: 'vue2-app',
+    // TODO: 替换为你的 Vue 2 子应用实际地址
+    url: 'http://localhost:5173/',
+    baseroute: '/child-app',
+    // Vite 子应用必须开启 iframe 模式
+    // （with 沙箱的 new Function() 不支持 ES Module 的 import/export 语法）
+    iframe: true,
+    keepAlive: true,
+    routerMode: 'native'
+  }
+]
+
+/**
+ * 根据名称查找子应用配置
+ */
+export function getSubAppConfig(name: string): SubAppConfig | undefined {
+  return subApps.find((app) => app.name === name)
+}
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..1f88a48
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,36 @@
+import { createApp } from 'vue'
+import microApp from '@micro-zoe/micro-app'
+import App from './App.vue'
+import router from './router'
+
+// 启动 micro-app 微前端框架
+// https://jd-opensource.github.io/micro-app/docs.html#/start
+microApp.start({
+  // 预加载：当浏览器空闲时预加载子应用，加快首屏速度
+  preFetchApps: [],
+  // 当子应用未匹配到路由时的默认行为
+  // 'default-page' 或自定义地址
+  // defaultPage: '',
+  // 全局生命周期
+  lifeCycles: {
+    created(_e, appName) {
+      console.log(`[micro-app] 子应用 ${appName} 被创建`)
+    },
+    beforemount(_e, appName) {
+      console.log(`[micro-app] 子应用 ${appName} 即将挂载`)
+    },
+    mounted(_e, appName) {
+      console.log(`[micro-app] 子应用 ${appName} 挂载完成`)
+    },
+    unmount(_e, appName) {
+      console.log(`[micro-app] 子应用 ${appName} 已卸载`)
+    },
+    error(_e, appName) {
+      console.error(`[micro-app] 子应用 ${appName} 加载错误:`, _e)
+    }
+  }
+})
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..1334e60
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,29 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/home'
+  },
+  {
+    path: '/home',
+    name: 'home',
+    component: () => import('@/views/Home.vue')
+  },
+  {
+    // 子应用路由 — `:page*` 通配符匹配子应用内部所有路由
+    // 例如：/child-app、/child-app/page1、/child-app/page2/xxx
+    path: '/child-app/:page*',
+    name: 'childApp',
+    component: () => import('@/views/ChildApp.vue')
+  }
+]
+
+const router = createRouter({
+  // history 模式 — 主应用和子应用都使用 history 模式
+  // 通过 baseroute 区分路由归属
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes
+})
+
+export default router
diff --git a/src/views/ChildApp.vue b/src/views/ChildApp.vue
new file mode 100644
index 0000000..f88103a
--- /dev/null
+++ b/src/views/ChildApp.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="child-app-wrapper">
+    <!--
+      micro-app 子应用容器
+      使用 key 绑定 url，当 url 变化时重新加载子应用
+    -->
+    <micro-app
+      :key="currentApp.url"
+      :name="currentApp.name"
+      :url="currentApp.url"
+      :baseroute="currentApp.baseroute"
+      :iframe="currentApp.iframe ?? false"
+      :keep-alive="currentApp.keepAlive ?? true"
+      :router-mode="currentApp.routerMode ?? 'native'"
+      :disable-scopecss="currentApp.disableScopecss ?? false"
+      :disable-sandbox="currentApp.disableSandbox ?? false"
+      @created="onCreated"
+      @beforemount="onBeforeMount"
+      @mounted="onMounted"
+      @unmount="onUnmount"
+      @error="onError"
+    >
+      <!-- 子应用加载中的占位内容 -->
+      <div class="loading-placeholder">
+        <div class="spinner"></div>
+        <p>正在加载子应用 {{ currentApp.name }}...</p>
+        <p class="loading-hint">
+          请确保子应用已启动：<code>{{ currentApp.url }}</code>
+        </p>
+      </div>
+    </micro-app>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { subApps } from '@/config/subApps'
+
+const route = useRoute()
+
+/**
+ * 当前正在使用的子应用配置
+ *
+ * 这里根据路由前缀匹配对应的子应用。
+ * 如果只有一个子应用，直接使用第一个配置；
+ * 多子应用时，需要根据 route.path 匹配 baseroute。
+ */
+const currentApp = computed(() => {
+  // 根据当前路径匹配子应用
+  const matched = subApps.find((app) =>
+    route.path.startsWith(app.baseroute)
+  )
+  return matched || subApps[0] || { name: 'unknown', url: '', baseroute: '/' }
+})
+
+// ============================================
+// micro-app 生命周期回调
+// ============================================
+
+function onCreated() {
+  console.log(`[ChildApp] 子应用 ${currentApp.value.name} 被创建`)
+}
+
+function onBeforeMount() {
+  console.log(`[ChildApp] 子应用 ${currentApp.value.name} 即将挂载`)
+}
+
+function onMounted() {
+  console.log(`[ChildApp] 子应用 ${currentApp.value.name} 挂载完成`)
+}
+
+function onUnmount() {
+  console.log(`[ChildApp] 子应用 ${currentApp.value.name} 已卸载`)
+}
+
+function onError(error: Error) {
+  console.error(`[ChildApp] 子应用 ${currentApp.value.name} 加载出错:`, error)
+}
+</script>
+
+<style scoped>
+.child-app-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+/* 确保 micro-app 标签占满容器 */
+.child-app-wrapper :deep(micro-app) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* 加载占位 */
+.loading-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 400px;
+  color: #999;
+}
+
+.spinner {
+  width: 36px;
+  height: 36px;
+  border: 3px solid #e0e0e0;
+  border-top-color: #667eea;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 16px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-placeholder p {
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.loading-hint {
+  font-size: 12px !important;
+  color: #bbb;
+  margin-top: 8px !important;
+}
+
+.loading-hint code {
+  background: #f0f0f0;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..81c1f51
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="home-page">
+    <div class="hero">
+      <h2>欢迎使用 MicroApp 微前端主应用</h2>
+      <p class="desc">
+        基于 <code>@micro-zoe/micro-app</code> + Vue 3 + Vite 搭建
+      </p>
+    </div>
+
+    <div class="sub-app-list">
+      <h3>已接入的子应用</h3>
+      <div class="cards">
+        <div
+          v-for="app in subApps"
+          :key="app.name"
+          class="sub-app-card"
+          @click="$router.push(app.baseroute)"
+        >
+          <div class="card-icon">📦</div>
+          <div class="card-info">
+            <h4>{{ app.name }}</h4>
+            <p class="card-url">{{ app.url }}</p>
+            <p class="card-route">路由前缀：{{ app.baseroute }}</p>
+          </div>
+          <div class="card-arrow">→</div>
+        </div>
+      </div>
+
+      <div v-if="subApps.length === 0" class="empty">
+        <p>暂未接入任何子应用</p>
+        <p class="hint">请在 <code>src/config/subApps.ts</code> 中配置子应用信息</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { subApps } from '@/config/subApps'
+</script>
+
+<style scoped>
+.home-page {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 40px 24px;
+}
+
+.hero {
+  text-align: center;
+  padding: 48px 0 40px;
+}
+
+.hero h2 {
+  font-size: 28px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero .desc {
+  margin-top: 12px;
+  color: #666;
+  font-size: 15px;
+}
+
+.hero code {
+  background: #e8e8e8;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.sub-app-list {
+  margin-top: 24px;
+}
+
+.sub-app-list h3 {
+  font-size: 16px;
+  color: #444;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.sub-app-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.sub-app-card:hover {
+  border-color: #667eea;
+  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
+  transform: translateY(-1px);
+}
+
+.card-icon {
+  font-size: 36px;
+  flex-shrink: 0;
+}
+
+.card-info {
+  flex: 1;
+}
+
+.card-info h4 {
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.card-url {
+  font-size: 13px;
+  color: #999;
+  margin-top: 4px;
+}
+
+.card-route {
+  font-size: 12px;
+  color: #667eea;
+  margin-top: 2px;
+}
+
+.card-arrow {
+  font-size: 20px;
+  color: #ccc;
+  flex-shrink: 0;
+  transition: color 0.2s;
+}
+
+.sub-app-card:hover .card-arrow {
+  color: #667eea;
+}
+
+.empty {
+  text-align: center;
+  padding: 48px 0;
+  color: #999;
+}
+
+.empty .hint {
+  margin-top: 8px;
+  font-size: 13px;
+}
+
+.empty code {
+  background: #e8e8e8;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+</style>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..21c6529
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,19 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+// micro-app 全局变量声明
+declare global {
+  interface Window {
+    __MICRO_APP_ENVIRONMENT__?: boolean
+    __MICRO_APP_NAME__?: string
+    __MICRO_APP_BASE_ROUTE__?: string
+    microApp?: any
+  }
+}
+
+export {}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e1f6a1d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..b064d52
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // 将 micro-app 标签识别为自定义元素
+          isCustomElement: (tag) => /^micro-app/.test(tag)
+        }
+      }
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  server: {
+    port: 8080
+  }
+})