6.4 KiB

Raw Blame History

Monorepo 架构设计方案

变更概述

将现有的 frontend 项目和空的 FrontendDesigner 项目整合为 Monorepo 架构，实现统一的管理、开发、构建和部署流程。

现状分析

当前项目状况

frontend: 已运行的Vue3项目，使用Element Plus、Vue Router、Pinia等技术栈
FrontendDesigner: 空文件夹，预备后续使用
当前问题:
- 两个项目分散管理，依赖重复
- 无法共享组件和工具库
- 构建和部署流程独立，维护成本高
- 无法统一管理依赖版本

技术栈统一性

两个项目都基于Vue3生态：

Vue 3 + Vite
Element Plus UI框架
国际化支持
响应式设计

解决方案

Monorepo 架构设计

1. 项目结构设计

d:\work\Aiproject\DeotalandAi/
├── package.json                 # 根级别依赖和脚本
├── pnpm-workspace.yaml         # pnpm工作空间配置
├── turbo.json                  # Turborepo任务配置
├── .eslintrc.base.json         # 基础ESLint配置
├── .prettierrc                 # Prettier配置
├── README.md                   # Monorepo项目说明
├── apps/                       # 应用项目
│   ├── frontend/              # 主前端应用
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   └── src/
│   └── designer/              # 设计器应用
│       ├── package.json
│       ├── vite.config.js
│       └── src/
├── packages/                   # 共享包
│   ├── ui/                    # UI组件库
│   │   ├── package.json
│   │   └── src/
│   ├── utils/                 # 工具库
│   │   ├── package.json
│   │   └── src/
│   └── config/                # 配置文件
│       ├── package.json
│       └── src/
├── scripts/                    # 构建脚本
│   ├── build.js
│   ├── dev.js
│   └── deploy.js
└── docs/                      # 项目文档
    └── monorepo-guide.md

2. 依赖管理策略

根级别依赖

{
  "devDependencies": {
    "turbo": "^1.10.0",
    "concurrently": "^8.2.0",
    "rimraf": "^5.0.0",
    "@vitejs/plugin-vue": "^6.0.1",
    "vite": "^7.2.2",
    "eslint": "^8.45.0",
    "prettier": "^3.0.0"
  }
}

工作空间依赖管理

开发依赖: 集中在根级别，避免重复安装
应用依赖: 每个应用独立管理其特定依赖
共享依赖: 在packages中统一管理，共用版本

3. 构建系统设计

Turborepo任务配置

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {}
  }
}

开发脚本

pnpm dev: 启动所有应用开发服务器
pnpm build: 构建所有项目
pnpm lint: 检查所有项目代码规范
pnpm clean: 清理所有构建产物

4. 组件共享策略

UI组件库 (`packages/ui`)

设计系统: 统一的主题、颜色、字体
基础组件: 按钮、输入框、卡片等
业务组件: 特定的业务逻辑组件
按需导入: 支持按需加载，减少bundle大小

工具库 (`packages/utils`)

API请求: 统一的HTTP客户端
格式化工具: 日期、数字、本地化格式化
验证器: 表单验证规则
存储工具: localStorage/sessionStorage封装

类型定义 (`packages/types`)

接口定义: 统一的TypeScript接口
API类型: 后端接口类型定义
组件Props: Vue组件Props类型

5. 配置共享

Vite配置

基础配置: 在根级别定义通用配置
特定配置: 各应用可覆盖特定配置
环境变量: 统一的环境变量管理

ESLint/Prettier配置

统一代码风格: 跨项目一致的代码规范
自动修复: 集成pre-commit hook
GitHub Actions: CI/CD中的代码检查

6. 开发体验优化

文档系统

Storybook: 组件文档和预览
类型文档: 自动生成API文档
架构文档: Monorepo使用指南

开发工具

VS Code工作区: 统一的项目配置
调试配置: 跨应用的调试设置
热重载: 保持跨包的热更新能力

7. 部署策略

独立部署

每个应用可独立部署到不同环境
支持不同的CI/CD流水线
独立的域名和子域名配置

构建优化

并行构建: 利用Turbo的并行能力
缓存策略: 本地和远程缓存
产物复用: 避免重复构建

8. 迁移策略

阶段一: 基础设施搭建

创建Monorepo结构
配置pnpm工作空间
设置Turbo任务

阶段二: 项目迁移

将frontend迁移到apps/frontend
重构依赖关系
共享基础配置

阶段三: 组件提取

提取公共组件到packages/ui
提取工具函数到packages/utils
统一类型定义

阶段四: 优化完善

完善文档和CI/CD
性能优化
开发者体验改进

收益分析

开发效率

依赖共享: 减少重复依赖，节省磁盘空间
代码复用: 组件和工具库统一管理
统一规范: 跨项目一致的代码风格
快速启动: 一个命令启动所有项目

维护成本

版本统一: 依赖版本统一管理，避免冲突
集中配置: 配置文件统一管理
自动化流程: 减少手动操作，降低错误率

团队协作

跨项目协作: 更容易进行跨应用的功能开发
知识共享: 统一的文档和最佳实践
新人上手: 单一项目结构，降低学习成本

风险评估

技术风险

复杂度增加: Monorepo结构相对复杂
构建时间: 大型项目可能影响构建速度
依赖冲突: 需要仔细管理依赖版本

缓解措施

渐进迁移: 分阶段实施，降低风险
充分测试: 完整的测试覆盖
文档完善: 详细的使用指南

结论

Monorepo架构将为DeotalandAi项目带来显著的开发效率提升和维护成本降低，同时为未来的扩展提供良好的基础架构。建议采用渐进式迁移策略，确保平稳过渡。

变更ID: monorepo-architecture-design
创建时间: 2025-11-18
作者:
状态: 待确认

6.4 KiB Raw Blame History Unescape Escape