# rx-mirco-web

**Repository Path**: moruoxing/rx-mirco-web

## Basic Information

- **Project Name**: rx-mirco-web
- **Description**: 基于 pnpm搭建 monorepo 多项目仓库 前端采用腾讯wujie作为微前端接入方案 支持微前端/单体前端启动模式
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-09
- **Last Updated**: 2026-02-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">

# 🚀 RX Micro Web

**企业级微前端解决方案 | Monorepo架构 | TypeScript驱动**

[![Node.js](https://img.shields.io/badge/Node.js-%3E=18.0.0-green?style=flat-square&logo=node.js)](https://nodejs.org/)
[![PNPM](https://img.shields.io/badge/PNPM-Workspace-blue?style=flat-square&logo=pnpm)](https://pnpm.io/)
[![Vue.js](https://img.shields.io/badge/Vue.js-3.5.24-brightgreen?style=flat-square&logo=vue.js)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
[![Vitest](https://img.shields.io/badge/Vitest-4.0.18-yellow?style=flat-square&logo=vitest)](https://vitest.dev/)
[![License](https://img.shields.io/badge/License-MIT-orange?style=flat-square)](LICENSE)

**构建现代化、可扩展的企业级微前端应用平台**

</div>

## 🌟 项目亮点

✨ **前沿技术栈** - 基于 Vue 3 + TypeScript + Vite 的现代化开发体验  
🏗️ **Monorepo架构** - 使用 PNPM Workspace 管理多包项目  
🚀 **微前端架构** - 集成 Wujie 微前端框架，实现应用隔离  
⚡ **极致性能** - 采用 Rolldown 构建工具，构建速度提升 10x+  
🎯 **工程化完善** - 完整的 ESLint + Prettier + Vitest 测试体系  
🔧 **智能配置** - 自动化环境变量管理与路径别名解析

## 📁 项目架构

```
rx-mirco-web/
├── 📦 apps/                    # 应用层
│   └── micro-app-main-upms/   # 主应用 (UPMS权限管理系统)
├── 🛠️ common/                  # 公共工具层
│   └── utils/                 # 工具函数
│       ├── load-common-env.ts # 环境变量加载器
│       └── load-path-resolve.ts # 路径解析工具
├── 🧪 vitest/                 # 测试层
│   ├── test-model/           # 测试模型
│   └── index.test.ts         # 测试入口
├── 📋 types/                  # 类型定义
└── 📄 配置文件               # 项目配置
```

## 🚀 快速开始

### 环境准备

```bash
# Node.js 版本要求
node >= 18.0.0

# 推荐使用 PNPM 包管理器
npm install -g pnpm
```

### 项目安装

```bash
# 克隆项目
git clone <repository-url>
cd rx-mirco-web

# 安装依赖
pnpm install

# 启动开发服务器
pnpm --filter micro-app-main-umps dev
```

### 常用命令

```bash
# 🎯 开发相关
pnpm --filter micro-app-main-umps dev          # 启动开发服务器
pnpm --filter micro-app-main-umps build:dev    # 开发环境构建
pnpm --filter micro-app-main-umps build:test   # 测试环境构建
pnpm --filter micro-app-main-umps build:prod   # 生产环境构建

# 🧪 测试相关
pnpm test                                      # 运行所有测试
pnpm test:ui                                   # 运行测试并打开 UI 界面

# 🎨 代码质量
pnpm lint:fix                                  # ESLint 自动修复
pnpm type-check                                # TypeScript 类型检查
```

## 🏗️ 技术架构详解

### 核心技术栈

| 技术           | 版本             | 用途           |
| -------------- | ---------------- | -------------- |
| **Vue 3**      | 3.5.24           | 渐进式前端框架 |
| **TypeScript** | 5.9.3            | 静态类型检查   |
| **Vite**       | 7.2.5 (Rolldown) | 新一代构建工具 |
| **Wujie**      | 1.0.29           | 微前端沙箱框架 |
| **Pinia**      | 3.0.4            | 状态管理       |
| **Vue Router** | 4.6.4            | 路由管理       |

### 架构特色

#### 🔄 微前端架构

```typescript
// 主应用集成示例
import { bus, setupApp } from "wujie-vue3";

// 子应用生命周期管理
setupApp({
	name: "sub-app",
	url: "//localhost:8080",
	alive: true,
	props: { userInfo: currentUser }
});
```

#### 🌍 环境变量管理

```typescript
// 智能环境变量合并
const env = loadCommonEnv(import.meta.env, mode, "micro-app-main-upms");
// 支持 common.env + common.env.[mode] + vite 环境变量三层合并
```

#### 🛣️ 路径别名解析

```typescript
// 自动化路径映射
{
  "@/*": ["./src/*"],
  "@/components/*": ["./src/components/*"],
  "@/views/*": ["./src/views/*"]
}
```

## 🧪 质量保障体系

### 测试策略

```bash
# 单元测试覆盖率
vitest --coverage

# 组件测试
vitest --run src/components/**/*.test.ts

# 集成测试
vitest --run tests/integration/**/*.test.ts
```

### 代码规范

```bash
# ESLint 配置
eslint . --ext .ts,.vue --fix

# Prettier 格式化
prettier --write "**/*.{ts,vue,json}"
```

### 类型安全

```bash
# TypeScript 类型检查
vue-tsc --noEmit

# 类型覆盖率分析
vue-tsc --noEmit --generateTrace trace
```

## 📊 性能优化

### 构建优化

- ✅ **Tree Shaking** - 自动移除未使用代码
- ✅ **Code Splitting** - 智能代码分割
- ✅ **Lazy Loading** - 组件懒加载
- ✅ **Asset Optimization** - 资源压缩优化

### 运行时优化

- ✅ **响应式优化** - Vue 3 Composition API
- ✅ **虚拟滚动** - 大数据列表优化
- ✅ **缓存策略** - HTTP 缓存 + 本地缓存
- ✅ **骨架屏** - 提升用户体验

## 🚀 部署指南

### Docker 部署

```dockerfile
FROM node:18-alpine as builder
WORKDIR /app
COPY . .
RUN pnpm install --frozen-lockfile
RUN pnpm --filter micro-app-main-umps build:prod

FROM nginx:alpine
COPY --from=builder /app/apps/micro-app-main-upms/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
```

### CI/CD 配置

```yaml
# GitHub Actions 示例
name: Deploy
on:
    push:
        branches: [main]
jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                  node-version: 18
            - run: npm install -g pnpm
            - run: pnpm install
            - run: pnpm --filter micro-app-main-umps build:prod
            - run: # 部署到服务器
```

## 🤝 贡献指南

我们欢迎任何形式的贡献！

### 开发流程

1. Fork 项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

### 代码规范

- 遵循现有的 ESLint 配置
- 添加相应的测试用例
- 更新相关文档
- 确保 CI 检查通过

## 📚 文档资源

- [📘 Vue 3 官方文档](https://vuejs.org/)
- [📘 TypeScript 手册](https://www.typescriptlang.org/docs/)
- [📘 Vite 指南](https://vitejs.dev/guide/)
- [📘 Wujie 微前端](https://wujie-micro.github.io/doc/)
- [📘 Vitest 测试](https://vitest.dev/guide/)

## 📞 技术支持

如有问题，请通过以下方式联系我们：

- 📧 邮箱: moruosheng@example.com
- 💬 Issues: [GitHub Issues](https://github.com/your-org/rx-mirco-web/issues)
- 📖 Wiki: [项目文档](https://github.com/your-org/rx-mirco-web/wiki)

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解更多详情。

---

<div align="center">

**Made with ❤️ by 莫若省**

⭐ 如果这个项目对你有帮助，请给它一个 Star！

</div>