阶段四：前端工程化
阶段说明
- 学习周期：6 周
- 建议投入：每天 2-3 小时，每周学习 6 天，复盘和休息 1 天
- 前置要求：完成阶段三（后端进阶），阶段一的前端基础可以快速回忆
- 阶段目标：掌握 Vue 3 工程化开发方式，能够独立开发前端应用，并把阶段三的博客后端接成前后端分离的完整项目
本阶段原为阶段三，现调整到后端之后：这样后端能力更早成型，便于提前投递实习，同时 Vue 学完立刻用于全栈项目，不会闲置。
主要学习资料
参考视频待定。前端工程化的知识点相对稳定，也可以结合 Vue 官方文档、Vite 文档和 Element Plus 文档学习。
周计划（初步）
| 周次 | 学习主题 | 本周成果 |
|---|---|---|
| 第 1 周 | Node.js、npm、Vite 与 Vue 3 基础语法 | 使用 Vite 创建并运行 Vue 项目 |
| 第 2 周 | 组件化开发、组件通信、生命周期与计算属性 | 拆分出可复用组件 |
| 第 3 周 | Vue Router 与 Axios：路由、请求封装与环境变量 | 完成页面跳转和接口请求封装 |
| 第 4 周 | Pinia 状态管理与 Element Plus 组件库 | 完成登录状态和通用表格表单 |
| 第 5 周 | 后台管理界面开发：登录、列表、分页、增删改查 | 完成博客管理端主要页面 |
| 第 6 周 | 前后端联调、打包部署与项目收尾 | 博客系统前后端联通并上线 |
阶段验收
项目：全栈个人博客系统（前端与联调部分）
- 使用 Vite + Vue 3 开发，页面结构组件化，状态使用 Pinia 管理
- 使用 Element Plus 完成表格、表单、分页、弹窗等常见交互
- Axios 统一封装请求，处理 token、错误提示和加载状态
- 对接阶段三的真实接口，完成登录、文章管理、分类与评论管理
- 前端打包后能够部署访问，并正确指向后端接口地址
- 使用 Git 管理提交，README 说明启动方式和接口配置
阶段完成清单
- 能够使用 Vite 创建和配置 Vue 3 项目
- 能够完成组件拆分与父子、兄弟组件通信
- 能够使用 Vue Router 和 Pinia 组织多页面应用
- 能够使用 Element Plus 快速搭建后台界面
- 能够封装 Axios 并处理登录态和错误
- 完成博客系统前后端联调与部署
- 能够独立讲解前端项目的目录结构、请求流程和状态管理