资源介绍
视频数量：96个
总时长：5小时23分
课程介绍：
Vue从入门到实战：用六个项目吃透前端框架
刚学完 HTML、CSS、JavaScript 基础的你，是不是正在为"下一步该学什么"发愁？打开招聘网站，前端工程师的岗位要求里十有八九都写着"熟悉 Vue 或 React"。Vue 作为国内最受欢迎的前端框架之一，上手相对友好，社区资源丰富，是很多前端新手的首选。但问题也随之而来：官方文档看了个大概，网上教程东一榔头西一棒子，知识点零零碎碎，学完还是不知道怎么写一个完整项目。
这门课想做的事情很简单：不搞纯理论灌输，直接用项目驱动的方式，让你跟着做六个层层递进的 Vue 实战项目，从最基础的计数器一路做到带路由、带状态管理、带 TypeScript 的完整应用。五小时二十三分，九十六节课，每节都不啰嗦，讲完一个功能点就进入下一个。学完之后，你对 Vue 的核心机制和工程化开发流程会有一个清晰的整体认知。
一、入门准备与计数器练习
课程先从环境搭建开始：安装 Chrome 浏览器、Node.js 和 VSCode，配置好开发工具。紧接着你会看到 Vue 项目两种最常见的创建方式——通过 CDN 引入和通过 Vue CLI（或 Vite）脚手架创建。讲师会带着你分别用这两种方式做一个简单的计数器小应用，让你直观感受两种方式的区别。CDN 方式适合做小 demo 和快速验证想法，脚手架方式才是真正做项目的标配。
在计数器小应用里，你会第一次接触 Vue 中最核心的概念：响应式数据（ref）和事件绑定（@click 指令）。这两个概念看似简单，但其实是理解整个 Vue 的根基。搞清楚数据变化如何自动触发视图更新，视图上的交互又如何反馈到数据，后面写任何 Vue 应用都会顺畅很多。最后还会讲一下脚手架生成的项目目录结构，让你明白每个文件、每个文件夹是干什么的。
二、待办事项应用：响应式与数据操作
第一个完整的实战项目是待办事项（Todo）应用。这个项目麻雀虽小，五脏俱全，几乎涵盖了 Vue 3 开发中最常用的功能。
你会学到双向数据绑定（v-model），输入框里敲什么，数据就跟着变；用 v-for 渲染任务列表；用 v-if / v-else 控制元素的显示和隐藏；用 v-on 配合修饰符监听键盘事件，比如按下回车就添加任务。每个任务还要支持标记完成、编辑、删除、收藏切换，这些操作会带出条件样式绑定（动态 class）和事件处理的细节。
待办事项应用里还有两个重量级特性必须掌握：计算属性（computed）和侦听器（watch）。computed 用来派生数据，比如根据搜索关键字过滤后的任务列表；watch 用来监听数据变化并执行副作用，比如自动把任务数据保存到浏览器的 localStorage。学完这一节，你就能独立做出一个真正可用的待办工具了。
三、课程应用：组件化思维
第二个项目是一个课程列表应用，重点训练组件化开发能力。讲师会带你一步步把页面拆分成独立的组件：CourseItem（单个课程卡片）、RoundedButton（通用圆角按钮）等等。
组件之间如何通信？父组件传数据给子组件用 defineProps，子组件通知父组件用 defineEmits，想传递一段 HTML 内容用 slot，需要多个插槽就用具名插槽（named slot）。这些是 Vue 组件化开发的核心约定，搞清楚之后，写复杂页面就不再是堆代码了。
这个项目还会模拟真实业务场景：用 JSON Server 搭建一个本地 mock 接口，发起 fetch 请求获取课程数据，处理加载中、空数据、错误等不同状态。讲师会教你做一个骨架屏（skeleton）动画来优化加载体验，还会让你的"购买"操作变成乐观更新——先更新 UI，再发请求，失败再回滚，这在真实项目中非常常见。
当 App.vue 越写越长时，你还会第一次接触 Vue 3 的杀手锏特性：组合式函数（Composables）。把数据请求、状态管理这些逻辑抽出来封装成 useFetch、useCourses 之类的函数，让组件只关心视图层。代码一下子清爽很多。
四、Pinia：现代状态管理方案
Composables 解决了组件内部和跨组件的逻辑复用问题，但当应用规模继续扩大，多个组件需要共享同一份数据时，就需要更规范的状态管理工具了。Pinia 是 Vue 官方推荐的下一代状态管理库，已经取代了老牌的 Vuex。
这一节讲师会先带你用纯 composables 写一个计数器，然后改写成 Pinia 版本，通过对比让你看清两者的适用场景。Pinia 用 useCounterStore 这种写法定义 store，状态、getter、action 分得清清楚楚，还有完善的 TypeScript 类型推导。在大型团队协作中，这种规范性比什么都重要。
五、Vue Router：单页面应用路由
待办事项和课程应用都是单页面，但真正的 Web 应用通常需要多个页面和不同的 URL。Vue Router 就是解决这个问题的。
这一部分会教你配置路由、用 RouterLink 做导航、用 RouterView 渲染对应页面组件。动态路由（比如 /course/:id 这种带参数的路径）、命名路由（给路由起名字方便跳转）、404 页面配置、路由守卫（判断用户是否登录才能进入某些页面）这些进阶用法都会讲到。最后还会讨论一个常见问题：数据请求到底应该放在组件的 onMounted 里，还是放在 watch 里监听路由变化？两种方式各有优劣，讲师会带你分析各自的适用场景。
六、TypeScript、过渡动画与 Teleport
最后一个项目是"Vue 偏好设置"应用，综合训练几项高级特性：TypeScript 集成、表单处理、过渡动画、KeepAlive 和 Teleport。
你会用 TypeScript 的泛型来增强 composables 的类型安全；用 Vue 内置的 Transition 组件给标签页切换加上淡入淡出效果；用 KeepAlive 缓存不活动的组件实例，切换标签时不丢失表单数据；用 Teleport 把 Toast 通知组件渲染到 body 末尾，避免被父元素的 overflow:hidden 裁剪掉。这些都是做精致前端产品绕不开的知识点。
表单部分还会教你把数据持久化到 localStorage，刷新页面后用户的设置还在。Toast 通知系统则会封装成一个 useToastNotifications composable，任何组件调用一下就能弹出提示，用起来非常顺手。
学完全部内容，你会拥有什么？
五个多小时的课程不算长，但因为是项目驱动的，几乎每个知识点都立刻在代码里跑了一遍，记忆会非常深刻。你会掌握 Vue 3 的响应式系统、组件通信、组合式 API、Pinia 状态管理、Vue Router、TypeScript 集成、动画与 Teleport 这些主流技术栈。简历上写"熟悉 Vue 3 全家桶"，面试官问到项目经验，你也能把六个项目的细节讲得清清楚楚。
这门课适合已经掌握 HTML、CSS 和 JavaScript 基础（最好了解一些 ES6 特性）的人，不需要任何框架经验。如果你想转行做前端、刚入职需要上手 Vue 项目、或者自学 Vue 卡在某个环节想系统补一遍，跟着把六个项目做完，基本就能独立开发中小型 Vue 应用了。