@lvetechs/micro-app 1.0.2 → 1.1.0

package/README.md

@@ -16,16 +16,17 @@ npm install @lvetechs/micro-app
 {
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "vue": ">=3.0.0"
   }
 }
 ```
 
-## 两种使用模式
+> **注意**：Vue 是可选依赖。如果在 Vue 项目中使用，需要安装 Vue；如果在 React 项目中使用，需要安装 React。
 
-### 模式一：函数式实例化
+## 在 React 项目中使用
 
-使用 `createMicroApp` 函数创建微应用服务实例，通过返回的实例方法控制应用。
+### 方式一：函数式实例化
 
 ```tsx
 import { createMicroApp } from '@lvetechs/micro-app'
@@ -228,6 +229,84 @@ function App() {
 <!-- 组件式会自动创建，但容器选择器需要匹配配置 -->
 ```
 
+## 在 Vue 项目中使用
+
+### 方式一：函数式实例化
+
+与 React 项目相同，使用 `createMicroApp` 函数：
+
+```vue
+<script setup lang="ts">
+import { createMicroApp } from '@lvetechs/micro-app'
+
+const microApp = createMicroApp({
+  apps: [
+    {
+      name: 'react-app',
+      entry: 'http://localhost:3001',
+      container: '#react-app-container',
+      mode: 'iframe',
+    },
+  ],
+  onStatusChange: (name, status) => {
+    console.log(`[${name}] 状态变化: ${status}`)
+  },
+})
+
+// 启动应用
+microApp.startApp('react-app')
+</script>
+
+<template>
+  <div id="react-app-container"></div>
+</template>
+```
+
+### 方式二：使用 Vue 组件
+
+在 Vue 3 项目中可以使用 `MicroAppVue.vue` 组件：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import MicroAppVue from '@lvetechs/micro-app/dist/components/MicroAppVue.vue'
+
+const apps = [
+  {
+    name: 'react-app',
+    entry: 'http://localhost:3001',
+    container: '#vue-app-container',
+    active_rule: '/app/react',
+  },
+  {
+    name: 'vue-app',
+    entry: 'http://localhost:3002',
+    container: '#vue-app-container',
+    active_rule: '/app/vue',
+  },
+]
+
+const activeApp = ref(apps[0].name)
+</script>
+
+<template>
+  <div>
+    <!-- 切换按钮 -->
+    <button @click="activeApp = 'react-app'">React App</button>
+    <button @click="activeApp = 'vue-app'">Vue App</button>
+    
+    <!-- 微应用组件 -->
+    <MicroAppVue
+      :apps="apps"
+      :active-app="activeApp"
+      @status-change="(name, status) => console.log(name, status)"
+    />
+  </div>
+</template>
+```
+
+> **注意**：使用 Vue 组件时，需要在项目中安装 `@vitejs/plugin-vue`。
+
 ## 打包
 
 ```bash

package/dist/index.d.ts

@@ -5,6 +5,12 @@
  *
  * 轻量级微前端框架
  * 支持函数式实例化和组件式实例化两种模式
+ * 同时支持 React 和 Vue
+ *
+ * 使用方式：
+ * - React: import { MicroApp, createMicroApp } from '@lvetechs/micro-app'
+ * - Vue:   import { createMicroApp } from '@lvetechs/micro-app'
+ *          并使用 src/components/MicroAppVue.vue 组件
  */
 export type { MicroAppStatus, LoadMode, SubAppConfig, MicroAppInfo, MicroAppInstance, MicroAppOptions, MicroAppService, } from './types';
 export { createMicroApp } from './core/MicroAppManager';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvetechs/micro-app",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "轻量级微前端框架 - 支持函数式和组件式实例化",
   "type": "module",
   "main": "dist/index.js",
@@ -12,10 +12,29 @@
     "LICENSE",
     "README.md"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.30.3"
+    "react-router-dom": "^6.30.3",
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
@@ -23,6 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-vue": "^5.0.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -31,7 +51,8 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^3.9.1",
+    "vue": "^3.4.0"
   },
   "keywords": [
     "micro-frontend",