前端实战项目 · 从构思到上线

01 项目启动与需求分析

• 从0到1构思前端项目
• 市场调研与竞品分析
• 用户故事与功能列表梳理

📂 进入章节 01.html

02 技术选型与架构设计

• React / Vue / Angular 对比
• 项目目录结构设计
• 组件化设计思想

📂 进入章节 02.html

03 开发环境搭建

• Node.js & npm/yarn/pnpm
• Vite / CRA 脚手架
• ESLint + Prettier 规范

📂 进入章节 03.html

04 版本控制入门

• Git / GitHub / GitLab 基础
• 分支管理策略 (Git Flow)
• 团队协作工作流

📂 进入章节 04.html

05 UI组件库选型与使用

• Ant Design / Element Plus / Tailwind
• 主题定制与按需加载

📂 进入章节 05.html

06 路由设计与实现

• Hash / History 模式
• React Router / Vue Router
• 嵌套路由与路由守卫

📂 进入章节 06.html

07 全局状态管理

• Context / Redux / Zustand / Pinia
• Store 结构设计
• 异步数据处理

📂 进入章节 07.html

08 API接口设计与对接

• RESTful vs GraphQL
• Axios 封装与拦截器
• Swagger / YApi 文档

📂 进入章节 08.html

09 用户认证与授权

• JWT / OAuth2.0 原理
• 登录/注册流程
• RBAC 权限控制

📂 进入章节 09.html

10 表单处理与验证

• 受控 / 非受控组件
• Formik / React Hook Form / VeeValidate
• 自定义验证规则

📂 进入章节 10.html

11 列表页与搜索功能

• 分页 / 排序 / 筛选
• 防抖与节流搜索
• 无限滚动加载

📂 进入章节 11.html

12 详情页与数据展示

• 动态路由参数获取
• 骨架屏加载
• Markdown / 富文本渲染

📂 进入章节 12.html

13 文件上传与处理

• 单文件/多文件上传
• 拖拽上传组件
• 图片裁剪与压缩

📂 进入章节 13.html

14 实时通信功能

• WebSocket 基础
• Socket.IO 集成
• 消息通知与在线状态

📂 进入章节 14.html

15 国际化与多语言

• i18n 方案对比
• react-i18next / vue-i18n
• 语言切换与持久化

📂 进入章节 15.html

16 主题切换与暗黑模式

• CSS 变量与 ThemeProvider
• localStorage 持久化
• 系统主题检测

📂 进入章节 16.html

17 性能优化（上）

• 代码分割与懒加载
• 图片优化 (WebP/懒加载)
• 虚拟列表处理大数据

📂 进入章节 17.html

18 性能优化（下）

• 缓存策略 (SW / HTTP缓存)
• Tree Shaking 构建优化
• Lighthouse 性能监控

📂 进入章节 18.html

19 测试策略

• 单元测试 (Jest / Vitest)
• 组件测试 (Testing Library)
• E2E 测试 (Cypress / Playwright)

📂 进入章节 19.html

20 错误处理与日志

• 全局错误边界
• API 错误统一处理
• Sentry 日志收集

📂 进入章节 20.html

21 构建与打包

• Webpack / Vite 高级配置
• 环境变量管理
• 多环境构建 (dev/staging/prod)

📂 进入章节 21.html

22 CI/CD流水线

• GitHub Actions / GitLab CI
• 自动化测试与构建
• 自动部署到服务器/CDN

📂 进入章节 22.html

23 Docker容器化

• Dockerfile 编写
• docker-compose 多服务编排
• Nginx 反向代理

📂 进入章节 23.html

24 移动端适配

• 响应式设计 (媒体查询)
• 移动端事件 (touch)
• PWA 离线能力

📂 进入章节 24.html

25 SEO与SSR

• Next.js / Nuxt.js 入门
• SSR vs SSG
• meta标签与结构化数据

📂 进入章节 25.html

26 安全最佳实践

• XSS / CSRF 防护
• HTTPS 与 CSP
• 敏感信息加密存储

📂 进入章节 26.html

27 监控与告警

• Web Vitals 性能监控
• 用户行为分析
• 告警规则设置

📂 进入章节 27.html

28 文档与团队协作

• Storybook 组件文档
• API 文档自动生成
• Code Review 规范

📂 进入章节 28.html

29 灰度发布与A/B测试

• 特性开关 (Feature Flag)
• A/B 测试框架集成
• 数据埋点方案

📂 进入章节 29.html

30 项目复盘与上线

• 上线检查清单
• 域名与CDN配置
• 复盘总结与迭代规划

📂 进入章节 30.html