[feat]Add vue MicroApp component api documentation

docs/api/README.md

@@ -353,9 +353,10 @@ A criterion for judging whether the business is closely related: <strong>Look at
 
 ## component load micro applications
 ### React project
-#### Usage
+#### Install
 
 ```bash
+npm i @qiankun
 npm i @qiankunjs/react
 ```
 
@@ -477,6 +478,127 @@ export default function Page() {
 ```
 
 
+### Vue project
+#### Install
+
+```bash
+npm i @qiankun
+npm i @qiankunjs/vue
+```
+
+#### MicroApp component
+
+Load (or unload) a sub-application directly through the `<MicroApp />` component, which provides capabilities related to loading and error capturing:
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" />
+</template>
+```
+
+When enabling the sub-application loading animation or error capturing capabilities, an additional style class `wrapperClassName` is accepted by the sub-application. The rendered result is as follows:
+
+```vue
+<div :class="wrapperClassName">
+  <MicroAppLoader :loading="loading" />
+  <ErrorBoundary :error="e" />
+  <MicroApp :class="className" />
+</div>
+```
+
+#### Loading Animation
+
+After enabling this feature, a loading animation will automatically be displayed while the sub-application is loading. When the sub-application finishes mounting and becomes in the MOUNTED state, the loading state ends, and the sub-application content is displayed.
+
+Simply pass `autoSetLoading` as a parameter:
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" autoSetLoading />
+</template>
+```
+
+#### Custom Loading Animation
+
+If you wish to override the default loading animation style, you can customize the loading component by using the loader slot as the sub-application's loading animation.
+
+```vue
+<script setup>
+import CustomLoader from '@/components/CustomLoader.vue';
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000">
+    <template #loader="{ loading }">
+      <custom-loader :loading="loading" />
+    </template>
+  </micro-app>
+</template>
+```
+
+Here, `loading` is a boolean type parameter; when true, it indicates that it is still in the loading state, and when false, it indicates that the loading state has ended.
+
+#### Error Capturing
+
+After enabling this feature, when the sub-application encounters an exception while loading, an error message will automatically be displayed. You can pass the `autoCaptureError` property to the sub-application to enable error capturing capabilities:
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" autoCaptureError />
+</template>
+```
+
+#### Custom Error Capturing
+
+If you wish to override the default error capturing component style, you can customize the error capturing component for the sub-application using the errorBoundary slot:
+
+```vue
+<script setup>
+import CustomErrorBoundary from '@/components/CustomErrorBoundary.vue';
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000">
+    <template #error-boundary="{ error }">
+      <custom-error-boundary :error="error" />
+    </template>
+  </micro-app>
+</template>
+```
+
+#### Component Properties
+
+| Property | Required | Description | Type | Default Value |
+| --- | --- | --- | --- | --- |
+| `name` | Yes | The name of the micro-application | `string` |  |
+| `entry` | Yes | The HTML address of the micro-application | `string` |  |
+| `autoSetLoading` | No | Automatically set the loading status of the micro-application | `boolean` | `false` |
+| `autoCaptureError` | No | Automatically set error capturing for the micro-application | `boolean` | `false` |
+| `className` | No | The style class for the micro-application | `string` | `undefined` |
+| `wrapperClassName` | No | The style class wrapping the micro-application's loading and error components | `string` | `undefined` |
+
+#### Component Slots
+
+| Slot            | Description          |
+| --------------- | -------------------- |
+| `loader`        | Loading state slot   |
+| `errorBoundary` | Error capturing slot |
+
+
 ## [addErrorHandler/removeErrorHandler](https://single-spa.js.org/docs/api#adderrorhandler)
 
 ## `addGlobalUncaughtErrorHandler(handler)`

docs/api/README.zh-CN.md

@@ -364,6 +364,7 @@ toc: menu
 #### 安装
 
 ```bash
+npm i @qiankun
 npm i @qiankunjs/react
 ```
 
@@ -484,6 +485,128 @@ export default function Page() {
 }
 ```
 
+### Vue 项目
+#### 安装
+
+```bash
+npm i @qiankun
+npm i @qiankunjs/vue
+```
+
+#### MicroApp 组件
+
+直接通过 `<MicroApp />` 组件加载（或卸载）子应用，该组件提供了 loading 以及错误捕获相关的能力：
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" />
+</template>
+```
+
+
+当启用子应用加载动画或错误捕获能力时，子应用接受一个额外的样式类 wrapperClassName，渲染的结果如下所示：
+
+```vue
+<div :class="wrapperClassName">
+  <MicroAppLoader :loading="loading" />
+  <ErrorBoundary :error="e" />
+  <MicroApp :class="className" />
+</div>
+```
+
+#### 加载动画
+
+启用此能力后，当子应用正在加载时，会自动显示加载动画。当子应用挂载完成变成 MOUNTED 状态时，加载状态结束，显示子应用内容。
+
+直接将 autoSetLoading 作为参数传入即可：
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" autoSetLoading />
+</template>
+```
+
+#### 自定义加载动画
+
+如果您希望覆盖默认的加载动画样式时，可以通过 loader slot 来自定义加载组件 loader 作为子应用的加载动画。
+
+```vue
+<script setup>
+import CustomLoader from '@/components/CustomLoader.vue';
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" >
+     <template #loader="{ loading }">
+       <custom-loader :loading="loading">
+     </template>
+  </micro-app>
+</template>
+```
+
+其中，loading 为 boolean 类型参数，为 true 时表示仍在加载状态，为 false 时表示加载状态已结束。
+
+#### 错误捕获
+
+启用此能力后，当子应用加载出现异常时，会自动显示错误信息。可以向子应用传入 autoCaptureError 属性以开启子应用错误捕获能力：
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" autoCaptureError />
+</template>
+```
+
+#### 自定义错误捕获
+
+如果您希望覆盖默认的错误捕获组件样式时，可以通过 errorBoundary slot 来自定义子应用的错误捕获组件：
+
+```vue
+<script setup>
+import CustomErrorBoundary from '@/components/CustomErrorBoundary.vue';
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" >
+     <template #error-boundary="{ error }">
+       <custom-error-boundary :error="error">
+     </template>
+  </micro-app>
+</template>
+```
+
+#### 组件属性
+
+| 属性 | 必填 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- | --- |
+| `name` | 是 | 微应用的名称 | `string` |
+| `entry` | 是 | 微应用的 HTML 地址 | `string` |
+| `autoSetLoading` | 否 | 自动设置微应用的加载状态 | `boolean` | `false` |
+| `autoCaptureError` | 否 | 自动设置微应用的错误捕获 | `boolean` | `false` |
+| `className` | 否 | 微应用的样式类 | `string` | `undefined` |
+| `wrapperClassName` | 否 | 包裹微应用加载组件、错误捕获组件和微应用的样式类，仅在启用加载组件或错误捕获组件时有效 | `string` | `undefined` |
+
+#### 组件插槽
+
+| 插槽            | 说明         |
+| --------------- | ------------ |
+| `loader`        | 加载状态插槽 |
+| `errorBoundary` | 错误捕获插槽 |
+
+
 ## [addErrorHandler/removeErrorHandler](https://single-spa.js.org/docs/api#adderrorhandler)
 
 ## `addGlobalUncaughtErrorHandler(handler)`

docs/guide/getting-started.md

@@ -59,8 +59,15 @@ export default function Page() {
 }
 ```
 
-
-
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" />
+</template>
+```
 
 ## Sub Application
 

docs/guide/getting-started.zh-CN.md

@@ -59,7 +59,15 @@ export default function Page() {
 }
 ```
 
-
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" />
+</template>
+```
 
 ## 微应用
 

docs/guide/tutorial.md

@@ -185,8 +185,6 @@ export default function Page() {
 }
 ```
 
-
-
 ### Vue micro app
 
 Take the `vue 2.x` project generated by `vue-cli 3+` as an example, and add it after the `vue 3` version becomes stable.
@@ -268,6 +266,28 @@ Take the `vue 2.x` project generated by `vue-cli 3+` as an example, and add it a
    };
    ```
 
+### Vue MicroApp component
+1. Install
+
+```bash
+npm i qiankun
+npm i @qiankunjs/vue
+```
+
+2. Usage
+
+Load (or unload) child apps directly through the `<MicroApp/>` component, which provides loading and error catching-related capabilities:
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" />
+</template>
+```
+
 ### Angular micro app
 
 Take the `angular 9` project generated by `Angular-cli 9` as an example, other versions of `angular` will be added later.

docs/guide/tutorial.zh-CN.md

@@ -165,7 +165,7 @@ start();
    -   "eject": "react-scripts eject"
    ```
 
-### react 微应用组件
+### React 微应用组件
 1. 安装
 
 ```bash
@@ -267,6 +267,28 @@ export default function Page() {
    };
    ```
 
+### Vue 微应用组件
+1. 安装
+
+```bash
+npm i qiankun
+npm i @qiankunjs/vue
+```
+
+2. 使用
+
+直接通过 `<MicroApp />` 组件加载（或卸载）子应用，该组件提供了 loading 以及错误捕获相关的能力：
+
+```vue
+<script setup>
+import { MicroApp } from '@qiankunjs/vue';
+</script>
+
+<template>
+  <micro-app name="app1" entry="http://localhost:8000" />
+</template>
+```
+
 ### Angular 微应用
 
 以 `Angular-cli 9` 生成的 `angular 9` 项目为例，其他版本的 `angular` 后续会逐渐补充。