Vue
前端开发 · 预计 3-5 周 · 4 阶段
Vue 以渐进式设计著称，从轻量页面到复杂中后台都能胜任。路线图从模板语法与响应式原理开始，掌握组件通信、组合式 API、Pinia 状态管理与 Vue Router，最终用 Vite 完成一个完整项目。
学后可投：Vue 前端工程师Web 开发工程师中后台开发工程师
建议先学：HTML & CSS
学习进度：已完成 0 / 4 阶段0%
下一阶段目标：模板语法与响应式（完成当前阶段后自动推进）
学习路线图按顺序学完每一阶段
点击阶段节点直达学习内容；绿色=已完成，彩色=当前阶段
1
当前阶段模板语法与响应式
2-4 天难度 入门
核心知识点
模板插值与指令（v-if/v-for/v-model）计算属性与侦听器响应式原理（proxy）样式绑定与 class
本阶段学习内容
要点速记
- 指令：v-if 条件 / v-for 列表（带 key）/ v-model 双向绑定 / : 绑定 / @ 事件
- computed 是自动缓存的派生状态，能用就别用 watch
- Vue3 响应式基于 Proxy：新增属性、数组下标修改都能侦测
- 解构会丢失响应性，用 toRefs 保留
本阶段练习题（点击选项作答）
1. v-model 的本质是？
2. computed 与 watch 的选型正确的是？
3. const { count } = reactive({count: 0}) 后 count 会怎样？
练习任务
- 用 Vue 实现待办列表（含过滤）
- 实现一个购物车数量加减组件
本阶段验收标准
独立完成一个含指令/计算属性/表单绑定的页面
2
组件化与组合式 API
3-5 天难度 初级
核心知识点
props/emit 组件通信插槽 slot 与作用域插槽组合式 API（setup/ref/reactive）自定义指令与 Teleport
本阶段学习内容
要点速记
- 父传子 props（只读），子传父 emit 事件
- 插槽：默认/具名/作用域，让组件从配置式升级为组合式
- 组合式函数（useXxx）打包响应式逻辑，优于 mixin
- 数据向下、事件向上是组件通信主线
本阶段练习题（点击选项作答）
1. 子组件向父组件通信的方式是？
2. 作用域插槽的特点是？
3. 组合式函数（composable）相比 mixin 的优势？
练习任务
- 封装一个通用弹窗组件（含插槽）
- 用组合式函数抽离计数器/防抖逻辑
本阶段验收标准
封装 3 个可复用组件，并用组合式函数抽离公共逻辑
3
路由与状态管理
3-5 天难度 中级
核心知识点
Vue Router 4（路由守卫/嵌套路由）Pinia 状态管理异步数据请求Vite 工程化与组件库（Element Plus）
本阶段学习内容
要点速记
- 路由守卫控制导航：beforeEach 做登录校验/标题设置
- Pinia：state/getters/actions 三件套，比 Vuex 少 mutation
- 组件库按需引入，二次封装保留 v-model/插槽/透传
- Element Plus 是中后台标配
本阶段练习题（点击选项作答）
1. 未登录访问需鉴权页面，正确做法是？
2. Pinia 与 Vuex 的主要区别是？
练习任务
- 实现带权限守卫的多页面应用
- 用 Pinia 管理用户登录态
本阶段验收标准
完成一个多页面应用：路由 + 状态 + 权限守卫跑通
4
中后台实战
5-10 天难度 高级
核心知识点
中后台布局与权限体系表格/表单/CRUD 最佳实践组件库二次封装性能优化与构建部署
本阶段学习内容
要点速记
- 中后台：路由表驱动菜单/面包屑/权限三处
- 通用表格组件：columns 配置驱动 + 插槽留扩展
- history 路由部署必须配 try_files fallback 到 index.html
- 封装目标：接新需求不改源码
本阶段练习题（点击选项作答）
1. Vue history 路由部署到 Nginx 的必需配置是？
2. 通用表格组件封装的关键是？
练习任务
- 用 Element Plus 实现用户管理页（列表/新增/编辑）
- 封装一个带搜索/分页的通用表格组件
- 部署一个 Vue 应用到线上
本阶段验收标准
交付一个可用的中后台系统并部署上线
怎么学
学习方法与实操建议，配合路线图按阶段推进
- 1官方文档中文版质量极高，按「基础→深入」顺序精读
- 2每个知识点配一个小 demo，重点理解响应式原理
- 3对比 React 学 Vue 事半功倍（单向/双向数据流差异）
- 4做 1-2 个中后台项目练手（表格/表单/权限）
学完能做什么
- 用 Vue3 组合式 API 开发完整应用
- 掌握 Pinia 状态管理与路由
- 独立完成中后台系统开发
面试常见问题6 题
常见误区
- 1用选项式 API 写旧代码风格，不学组合式
- 2不理解响应式代理，修改对象不生效
- 3组件通信全靠 props 层层传
- 4不看官方文档，依赖过时教程
学习节奏建议
预计 3-5 周，共 4 个阶段。
每阶段按标注时长安排：先读参考文档掌握核心知识点，再完成练习任务，通过 验收标准后标记完成进入下一阶段。
当前为游客模式，进度保存在本设备；登录后可云端同步、多端续学。
当前进度
0%
0 / 4 阶段
进行中
进行中
下一阶段：模板语法与响应式