# WorkZoneMF

**Repository Path**: incess/work-zone-mf

## Basic Information

- **Project Name**: WorkZoneMF
- **Description**: 一个专注于微前端架构的开源项目，提供模块化、可复用的前端解决方案，支持多应用集成与高效开发协作。工作区 + 微前端完整开发环境配置。老项目零改造，零影响，渐进式迁移至微前端架构。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-27
- **Last Updated**: 2025-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 工作区 + 微前端

## 🔧 环境要求

- **Node.js**: v21.4.0(推荐使用)
- **包管理器**: pnpm v8+ (推荐使用)

## 📋 项目简介

工作区 + 微前端完整开发环境配置。老项目零改造，零影响，渐进式迁移至微前端架构。
该项目采用pnpm Workspace + Turborepo的方式管理多个子项目，实现了高效的依赖共享和任务执行。

## 🏗️ 项目工程结构目录

```
work-zone-mf/
├── package.json                      # 根工作区配置
├── pnpm-workspace.yaml              # pnpm工作区配置
├── turbo.json                       # Turborepo构建配置
├── apps/
│   ├── legacy-vue2-app/             # 老Vue2应用（遗留系统）
│   └── microfrontend-host/          # 微前端主应用（基于qiankun）
├── packages/
│   ├── micro-auth/                  # 认证微应用（独立身份验证系统）
│   ├── micro-dashboard/             # 仪表板微应用（数据分析与可视化）
│   ├── micro-user/                  # 用户管理微应用（用户信息与权限管理）
│   ├── shared/                      # 共享工具库（跨应用共享代码）
│   └── configs/                     # 共享配置（统一配置管理）
└── tools/
    ├── dev-proxy/                   # 开发代理服务器（解决跨域问题）
    └── scripts/                     # 开发脚本（辅助开发工作流）
```

## 💡核心架构与功能

### 架构特点

1. **pnpm Workspace 是基础**：通过 pnpm-workspace.yaml 定义工作区，实现依赖的共享和统一管理，避免重复安装。
2. **包（Packages）是积木**：将可复用的逻辑（UI、工具函数、配置）抽象成独立的包，提高代码复用率。
3. **应用（Apps）是消费者**：应用消费这些包来构建最终产品，每个应用可以独立开发和部署。
4. **Turborepo 是大脑**：通过 turbo.json 定义任务依赖和缓存策略，实现高效的构建和开发流程，加速 CI/CD。

### 功能模块说明

#### 应用层 (apps/)

- **legacy-vue2-app**：遗留的Vue2应用，保持原有功能并通过微前端方式与新应用集成 **(这里不需要开发,替换成已上线地址即可)****
- **microfrontend-host**：微前端主应用，基于qiankun框架，负责加载和管理各个微应用

#### 微应用层 (packages/micro-*)

- **micro-auth**：认证微应用，处理用户登录、注册、权限验证等身份认证相关功能
- **micro-dashboard**：仪表板微应用，提供数据统计、可视化图表等数据分析功能
- **micro-user**：用户管理微应用，负责用户信息管理、角色权限配置等功能

#### 共享层 (packages/)

- **shared**：共享工具库，提供跨应用使用的工具函数、组件和业务逻辑
- **configs**：共享配置，管理各应用共用的配置项，如API地址、主题设置等

#### 工具层 (tools/)

- **dev-proxy**：开发代理服务器，解决开发环境中的跨域问题和API请求转发
- **scripts**：开发辅助脚本，包括端口检查、初始化开发环境、智能启动等功能

## 💡 开发工作流

### 首次设置

```bash
 build:smart
# 1. 安装依赖
pnpm install

# 2. 构建共享包
pnpm run build:shared

# 3. 启动开发环境 (本地开发智能启动)
pnpm run dev:smart 

# 或者使用一键安装和构建命令
pnpm run install:all

# 或者使用新的开发环境初始化脚本
pnpm run init:dev

# 智能打包
pnpm run build:smart
```

### 开发辅助工具

```
pnpm run dev:check-ports  # 检查端口占用情况
pnpm run dev:kill-ports   # 杀死占用端口的进程
pnpm run clean:all        # 清理所有构建产物
```