01
项目启动
项目启动与需求分析
项目背景介绍 · 需求文档撰写 · 技术选型 (Vue3+TS+Vite) · 项目架构设计
进入章节 →
02
工程化
开发环境搭建与工程化配置
Node.js与包管理器 · Vite初始化 · ESLint+Prettier · Git工作流与分支策略
进入章节 →
03
核心基础
Vue3核心基础回顾
Composition API (setup/ref/reactive) · 生命周期 · 组件通信 (props/emit/provide/inject)
进入章节 →
04
TypeScript
TypeScript在Vue中的实践
类型定义与接口 · 泛型组件 · 类型安全props/emit · tsconfig优化
进入章节 →
05
路由
路由设计与管理
Vue Router 4 · 嵌套/动态路由 · 路由守卫(权限) · 路由懒加载
进入章节 →
06
状态管理
状态管理Pinia
Pinia核心 (store/state/getters/actions) · 模块化 · 持久化插件
进入章节 →
07
UI组件
UI组件库集成与二次封装
Element Plus / Ant Design Vue · 主题定制 · 通用组件封装 (表格/表单/弹窗)
进入章节 →
08
HTTP
HTTP请求与API管理
Axios封装 (拦截器/错误处理) · API模块化 · 请求取消与重试
进入章节 →
09
认证
用户认证与权限管理
JWT登录流程 · 路由权限 · 按钮级权限 · 角色管理
进入章节 →
10
表单
表单设计与验证
动态表单生成 · VeeValidate/Vuelidate · 自定义验证 · 复杂表单场景
进入章节 →
11
表格
表格与数据展示
高级表格 (排序/筛选/分页) · 虚拟滚动 · 导出Excel/CSV
进入章节 →
12
图表
图表与可视化
ECharts / Chart.js · 动态数据更新 · 图表自适应 · 大屏适配
进入章节 →
13
文件
文件上传与管理
断点续传 · 进度条 · 图片裁剪压缩 · OSS/CDN集成
进入章节 →
14
国际化
国际化与多语言
vue-i18n · 语言包管理 · 动态切换 · 日期/货币格式化
进入章节 →
15
主题
主题切换与暗黑模式
CSS变量方案 · 主题切换逻辑 · 暗黑模式适配 · 持久化偏好
进入章节 →
16
性能
性能优化策略
代码分割/懒加载 · 虚拟列表 · 图片懒加载 · keep-alive缓存
进入章节 →
17
监控
错误监控与日志
前端错误捕获 (onerror/errorHandler) · Sentry · 用户行为日志
进入章节 →
18
测试
单元测试与集成测试
Vitest配置 · 组件/组合函数测试 · Mock API · E2E (Cypress)
进入章节 →
19
CI/CD
CI/CD流水线
GitHub Actions / GitLab CI · 自动化测试 · 构建部署 · 环境变量
进入章节 →
20
容器化
Docker容器化部署
Dockerfile · docker-compose · Nginx反向代理 · 多服务编排
进入章节 →
21
移动端
移动端适配与响应式
Rem/Viewport方案 · 媒体查询 · 移动端组件 · 触摸事件
进入章节 →
22
WebSocket
WebSocket与实时通信
连接管理 · 心跳机制 · 消息推送 · 聊天/通知功能
进入章节 →
23
富文本
富文本编辑器集成
TinyMCE / Quill · 自定义工具栏 · 图片上传 · 内容安全过滤
进入章节 →
24
地图
地图与位置服务
高德/百度地图API · 标记点 · 路线规划 · 地理围栏
进入章节 →
25
支付
支付功能集成
支付宝/微信支付流程 · 订单状态 · 支付回调 · 退款逻辑
进入章节 →
26
通知
消息通知与推送
站内信 · Web Notification · 邮件/短信通知集成
进入章节 →
27
大屏
数据可视化大屏
大屏布局 · 数据轮播 · WebSocket实时刷新 · ECharts大屏优化
进入章节 →
28
微前端
微前端架构实践
qiankun / Module Federation · 子应用通信 · 公共依赖管理
进入章节 →
29
运维
项目上线与运维
域名与SSL · CDN加速 · 灰度发布 · 监控告警 · 日志分析
进入章节 →
30
复盘
项目复盘与总结
技术选型复盘 · 架构设计反思 · 性能优化总结 · 团队协作经验
进入章节 →