CloudObsidian

项目学习计划

7 min read

🚀 萌新员工快速上手指南

作为新员工，我为您制定了一个循序渐进的上手路径。让我们从环境搭建开始，逐步熟悉项目核心功能！

  • 📋 第一阶段：环境准备 (第1天)

  • 必备工具安装

    # 1. 安装 Node.js (\>= 20.0.0)
# 2. 安装 pnpm (\>= 9.5.0)
npm install -g [email protected]
 
# 3. 克隆项目后安装依赖
pnpm install

  • 核心概念理解

    • Monorepo: 一个仓库管理多个项目
    • Turbo: 高性能构建系统
    • pnpm workspace: 包管理工具

  • 🏃‍♂️ 第二阶段：熟悉项目结构 (第2-3天)

  • 重点关注目录

    keyu-monorepo/
├── apps/			# 应用程序 (重点学习)
│	├── ai-client/	 # 主要客户端应用 ⭐⭐⭐
│	├── next-agent-chat/ # Next.js聊天应用 ⭐⭐
│	└── ai-feed-remix/	# Remix应用 ⭐
├── packages/		# 共享包 (熟悉即可)
├── shared/		 # 共享工具库 (熟悉即可)
└── servers/		# 后端服务 (后期学习)

  • 启动第一个应用

    Read file: apps/ai-client/src/app.tsx

    Read file: apps/ai-client/src/providers/index.tsx Ran tool

  • 🏃‍♂️ 第二阶段：熟悉项目结构 (第2-3天)

  • 启动第一个应用

    # 启动主要客户端应用
pnpm dev:ai-client
 
# 启动其他应用
pnpm dev:next-agent-chat
pnpm dev:ai-research

  • 理解主应用架构 (ai-client)

    src/
├── app.tsx			# 应用入口 ⭐
├── providers/		# 全局状态提供者 ⭐
├── router/			# 路由配置 ⭐
├── pages/			# 页面组件 ⭐
├── components/		# 公共组件 ⭐
├── features/		# 业务功能模块 ⭐
├── hooks/			# 自定义Hooks
├── store/			# 状态管理
├── utils/			# 工具函数
└── constants/		# 常量定义

  • 🎯 第三阶段：核心技术掌握 (第4-7天)

  • 必掌握技术栈

    1. React 18 + TypeScript

    • 函数组件 + Hooks

    • TypeScript 类型定义

      1. Ant Design 5.20

    • 组件使用

    • 主题定制

      1. 状态管理 - Zustand

    • 简单易用的状态管理

    • 替代Redux的轻量级方案

      1. 样式方案 - UnoCSS

    • 原子化CSS

    • 按需生成样式

  • 实战练习

    Ran tool

    Ran tool Ran tool

    Read file: apps/ai-client/src/pages/404.tsx Read file: apps/ai-client/src/components/UserOption.tsx

  • 实战练习建议

    📁 从简单页面开始学习

    // 参考 apps/ai-client/src/pages/404.tsx
// 理解基本的页面组织结构：
// 1. 导入国际化工具 (@bty/localize)
// 2. 使用共享组件
// 3. 简洁的函数组件写法

    🧩 学习复杂组件

    // 参考 apps/ai-client/src/components/UserOption.tsx
// 掌握关键概念：
// 1. TypeScript 接口定义
// 2. useMemo 性能优化
// 3. UnoCSS 样式类名
// 4. Ant Design 组件使用

  • 🔧 第四阶段：开发工作流 (第8-10天)

  • 常用命令

    # 开发环境
pnpm dev:ai-client			# 启动主客户端
pnpm dev:next-agent-chat	# 启动聊天应用
pnpm dev:ai-research		# 启动研究应用
 
# 构建相关
pnpm build					# 构建所有项目
pnpm lint					# 代码检查
pnpm test					# 运行测试
 
# 特定应用构建
pnpm build:dev				# 开发环境构建
pnpm build:pre				# 预发布环境
pnpm build:prod			 # 生产环境

  • Git 工作流

    # 提交代码 (使用 AI 助手生成 commit message)
pnpm cz
 
# 代码会自动进行：
# 1. ESLint 检查
# 2. Prettier 格式化
# 3. 提交信息规范检查

  • 🎯 第五阶段：业务理解 (第11-14天)

  • 核心业务模块

    Ran tool

  • 重点业务功能模块

    1. 🤖 AI Agent - 智能代理功能
    2. 💬 Chat - 聊天对话系统
    3. 🔧 Application - 应用管理
    4. 📊 Database - 数据库管理
    5. 🎯 Skill - 技能系统
    6. 🔌 Plugin - 插件生态
    7. 📈 Analyze - 数据分析

  • 学习建议路径

    第11天：熟悉 Chat 聊天功能 (最常用)
第12天：了解 Agent 智能代理
第13天：学习 Application 应用管理
第14天：整体业务流程梳理

  • 🏆 第六阶段：进阶学习 (第15-21天)

  • 高级技术栈

    1. 状态管理深入

    • Zustand store 设计模式

    • 跨组件状态共享

      1. 性能优化

    • React.memo、useMemo、useCallback

    • 代码分割与懒加载

      1. 工程化实践

    • Monorepo 包管理

    • 共享组件库开发

  • 贡献代码准备

  • 熟悉团队代码规范

  • 了解 PR 流程

  • 学会使用调试工具

  • ⚡ 快速上手检查清单

  • ✅ 第一周目标

  • 成功启动至少2个应用

  • 理解项目基本架构

  • 能够阅读并理解简单组件

  • 掌握基本的开发命令

  • ✅ 第二周目标

  • 能够修改简单的UI组件

  • 理解状态管理流程

  • 熟悉主要业务模块

  • 能够独立完成小功能开发

  • ✅ 第三周目标

  • 具备独立开发能力

  • 理解复杂业务逻辑

  • 能够进行代码Review

  • 掌握性能优化基础

  • 🆘 遇到问题时

  • 常见问题解决

    1. 依赖安装失败 → 清理缓存：pnpm clean && pnpm install
    2. 应用启动失败 → 检查Node.js版本和环境变量
    3. 代码规范报错 → 运行：pnpm lint:fix
    4. 类型错误 → 先理解业务逻辑，再查看类型定义

  • 学习资源

  • 项目内部文档：docs/ 目录

  • 组件库文档：packages/components/

  • 团队技术分享会议录屏

  • 寻求帮助

    1. 🔍 先在代码中搜索相似实现
    2. 📚 查阅相关技术文档
    3. 🙋‍♂️ 向团队mentor请教
    4. 💬 在团队群里提问

    💡 小贴士: 不要急于求成，每天专注掌握1-2个核心概念，循序渐进地深入学习。这个项目技术栈很现代化，掌握后对职业发展很有帮助！

    记住：代码是最好的文档，多读多看多实践！🚀

Graph View

Backlinks