# qiankun-vue3-react

**Repository Path**: ocean-north/qiankun-vue3-react

## Basic Information

- **Project Name**: qiankun-vue3-react
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-25
- **Last Updated**: 2025-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微前端项目 - qiankun + Vue3 + React + Vite

本项目基于 qiankun、Vue3、React 18 和 Vite 搭建的微前端架构示例，展示了主应用和不同技术栈子应用之间的通信和数据共享机制。

## 项目结构

```
micro-app/
├── main-app              # 主应用
├── app1                  # 子应用1 (Vue3)
├── app2                  # 子应用2 (Vue3)
├── app3                  # 子应用3 (React)
└── .gitignore            # Git忽略文件
```

## 技术栈

- **主框架**：qiankun
- **前端框架**：Vue 3、React 18
- **构建工具**：Vite
- **路由管理**：Vue Router、React Router
- **状态管理**：Pinia、React Context
- **编程语言**：TypeScript

## 快速开始

### 安装依赖

分别在主应用和子应用目录下安装依赖：

```bash
# 主应用
cd main-app
npm install

# 子应用1 (Vue3)
cd ../app1
npm install

# 子应用2 (Vue3)
cd ../app2
npm install

# 子应用3 (React)
cd ../app3
npm install
```

### 启动项目

需要同时启动主应用和所有子应用。建议使用多个终端分别运行以下命令：

```bash
# 主应用（运行在 5173 端口）
cd main-app
npm run dev

# 子应用1（运行在 5555 端口）
cd ../app1
npm run dev

# 子应用2（运行在 5556 端口）
cd ../app2
npm run dev

# 子应用3（运行在 5557 端口）
cd ../app3
npm run dev
```

启动成功后，访问 http://localhost:5173 即可查看微前端应用。

## 核心功能

### 1. 应用间通信

React子应用与Vue子应用使用相同的通信机制，但实现方式略有不同：

#### React子应用中使用全局状态

```typescript
// React子应用中接收全局状态
effect(() => {
  const globalState = window.__POWERED_BY_QIANKUN__ ? window.globalState : {}
  let cleanup: any
  
  // 注册全局状态监听
  if (globalState?.actions?.onGlobalStateChange) {
    const tempCleanup = globalState.actions.onGlobalStateChange((state: any) => {
      // 处理全局状态变更
    }, true)
    
    // 类型安全检查
    if (typeof tempCleanup === 'function') {
      cleanup = tempCleanup
    }
  }
  
  // 清理函数
  return () => {
    if (typeof cleanup === 'function') {
      cleanup()
    }
  }
}, [])

// React子应用中更新全局状态
if (globalState?.actions?.setGlobalState) {
  globalState.actions.setGlobalState({
    userInfo: {
      name: newName,
      age: newAge
    }
  })
}
```

#### 1.1 主应用向子应用传递参数

本项目实现了三种主要的通信方式：

#### 1.1 主应用向子应用传递参数

通过 qiankun 的 props 机制，主应用可以向子应用传递数据和回调函数：

```typescript
// 主应用配置
{
  name: "app1",
  entry: "http://localhost:5555/",
  container: "#app",
  activeRule: "/app1",
  props: {
    userInfo: { name: "张三", age: 18 },
    onChangeUserInfo: (newUserInfo) => {
      // 处理用户信息变更
    }
  }
}
```

#### 1.2 子应用向主应用发送消息

子应用可以通过主应用传递的回调函数或者全局状态管理API更新主应用的数据：

```typescript
// 子应用中调用主应用的回调函数
if (globalState?.onChangeUserInfo) {
  globalState.onChangeUserInfo({
    name: newUserName.value,
    age: newUserAge.value
  })
}

// 或者使用 qiankun 的全局状态管理
if (globalState?.actions) {
  globalState.actions.setGlobalState({
    userInfo: {
      name: newUserName.value,
      age: newUserAge.value
    }
  })
}
```

#### 1.3 子应用之间共享数据

通过主应用的全局状态管理，子应用之间可以共享数据。当一个子应用修改了共享数据，其他子应用会自动同步更新。

### 2. 路由管理

- 主应用配置了所有子应用的路由入口
- 子应用的路由路径需要与主应用保持一致，以确保在独立运行和微前端环境中都能正常工作

### 3. 样式隔离

通过 qiankun 的 `experimentalStyleIsolation` 配置，实现了子应用之间的样式隔离，避免样式冲突。

## 开发注意事项

1. **路由配置**：子应用的路由路径需要与主应用中注册的路径保持一致
2. **通信方式**：推荐使用全局状态管理API进行应用间通信
3. **独立运行**：确保子应用可以独立运行，方便开发和调试
4. **环境检测**：使用 `qiankunWindow.__POWERED_BY_QIANKUN__` 检测当前运行环境

## 部署说明

1. 分别构建主应用和子应用
2. 配置主应用中各子应用的entry为实际部署地址
3. 确保各应用之间的跨域访问已正确配置

## License

MIT