📘
前端工程化·全流程复盘
30 章 · 从零到部署
🧑🎓
风格 · 明快版
1
项目启动与需求分析
MVP
项目背景调研 · 业务需求梳理 · 技术选型评估 · MVP范围界定
→
2
技术架构设计
SPA/SSR
前端架构模式选择 · 目录结构设计 · 组件树 · 状态管理方案
→
3
开发环境搭建
工具链
Node.js/npm/pnpm · TypeScript · ESLint/Prettier · Git Hooks
→
4
构建工具配置
Vite
Webpack/Vite核心配置 · 环境变量 · 路径别名 · 构建优化
→
5
UI组件库选型与二次封装
Ant Design
Ant Design/Element Plus · 主题定制 · 通用/业务组件封装
→
6
路由系统设计
动态路由
路由配置与懒加载 · 路由守卫 · 嵌套路由 · 权限控制
→
7
状态管理实战
Pinia
Pinia/Vuex核心 · 模块化设计 · 持久化 · 复杂状态处理
→
8
API层封装
Axios
Axios实例 · 请求/响应拦截器 · 错误处理 · 接口类型定义
→
9
Mock数据方案
MSW
MSW/json-server · Mock数据编写 · 前后端联调切换
→
10
登录注册模块开发
JWT
JWT认证 · Token管理 · 登录态保持 · 权限指令
→
11
列表页开发
表格
表格组件封装 · 搜索筛选 · 分页逻辑 · 批量操作
→
12
表单页开发
动态表单
动态表单设计 · 验证策略 · 复杂联动 · 性能优化
→
13
详情页与编辑页开发
草稿
数据加载回显 · 编辑模式切换 · 草稿保存 · 版本对比
→
14
文件上传与下载
大文件
上传组件封装 · 大文件分片 · 下载预览 · 进度管理
→
15
图表与可视化
ECharts
ECharts/Chart.js集成 · 图表封装 · 动态更新 · 大屏适配
→
16
国际化方案
i18n
i18n配置 · 语言包管理 · 动态切换 · 日期/货币格式化
→
17
主题切换与暗黑模式
CSS变量
CSS变量方案 · 主题色切换 · 暗黑模式 · 持久化
→
18
性能优化实战
虚拟列表
代码分割/懒加载 · 图片优化 · 虚拟列表 · 缓存策略
→
19
错误监控与日志
Sentry
前端错误捕获 · SourceMap · 日志上报 · Sentry集成
→
20
单元测试与集成测试
Vitest
Vitest/Jest配置 · 组件测试 · API测试 · E2E基础
→
21
CI/CD流水线
GitHub Actions
GitHub Actions/GitLab CI · 自动化构建/测试/部署
→
22
Docker容器化部署
Nginx
Dockerfile编写 · Nginx配置 · 多阶段构建 · 容器编排
→
23
移动端适配
Rem
Rem/Viewport方案 · 媒体查询 · 组件适配 · 触摸事件
→
24
PWA与离线能力
Service Worker
Service Worker注册 · 缓存策略 · 离线页面 · 消息推送
→
25
微前端架构
qiankun
qiankun/micro-app集成 · 子应用隔离 · 通信 · 公共依赖
→
26
低代码平台实践
拖拽
可视化拖拽 · 组件面板 · JSON Schema · 代码生成器
→
27
WebSocket实时通信
Socket.io
Socket.io集成 · 心跳机制 · 重连策略 · 消息广播
→
28
SSR服务端渲染
Nuxt.js
Nuxt.js/Next.js配置 · 数据预取 · SEO优化 · SSR/CSR混合
→
29
项目重构与迁移
渐进式
技术栈迁移策略 · 渐进式重构 · 兼容性 · 回归测试
→
30
项目复盘与文档沉淀
知识库
技术文档编写 · API文档生成 · Changelog · 知识库建设
→