尚硅谷Vue技术全家桶（天禹老师主讲）

前端开发

课程简介

《尚硅谷Vue技术全家桶（天禹老师主讲）》天禹老师的Vue技术全家桶视频教程包含视频共168个、课件资料、代码全都有！【技能收获】学完可掌握：Vue / 前端工程化、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目

已有 1 人浏览发布 2026-09-15 更新 2026-09-23

这套 Vue 全家桶到底讲了什么

天禹老师的这套 Vue 教程，主题是 Vue 技术栈的完整工程链路，而不是只讲 API。168 个视频的体量决定了它不是一份「速通」材料，而是把 Vue 从模板语法、响应式原理、组件通信，一路铺到路由、状态管理、网络请求封装，再到脚手架搭建和打包部署的完整过程。整套内容的主线很清晰：先用 Vue 核心概念建立心智模型，再引入周边生态把单页应用真正跑起来。配套的课件和源码是这套资料价值最集中的部分，因为前端的很多坑不在概念层面，而在配置项、目录约定和构建工具的衔接上，光看视频演示很容易漏掉。

技术栈与内容结构

从技术栈看，课程覆盖的是 Vue 2 时代那套被大量生产项目验证过的组合，包含模板指令、计算属性与侦听器、生命周期、组件化开发、插槽与自定义事件、过渡动画，以及 Vue Router 的路由配置与导航守卫，Vuex 的状态组织方案。这套组合在今天依然有大量存量项目在跑，读懂它对于接手老代码、做二次开发是很实际的帮助。

结构上大致可以分成几段：基础语法与数据绑定打底；组件化与父子通信把页面拆解成可维护单元；路由与状态管理解决多页面切换和跨组件数据流；最后落到脚手架工程与实战项目。这个推进顺序符合前端项目的真实搭建过程，跟着走一遍，等于把项目从零搭起来的决策点都过了一遍。

可复用的模块与代码价值

这套资料里真正能沉淀下来复用的，是几类具体产物。一是封装思路，比如请求层的统一处理、路由表的模块化拆分、Vuex 里 module 的划分方式，这些在后续项目里可以直接照搬结构。二是组件写法，课件里的组件通常带着 props 校验、事件约定和插槽设计，这类模板积累多了，写业务组件会明显更快。三是工程配置，脚手架生成的目录约定、代理配置、环境变量区分，这些是新手最容易卡住、又最需要参考现成样板的地方。

建议的使用方式是：视频看一段，就打开对应源码对着目录结构读一遍，重点看文件之间的引用关系和配置项，而不是只看最终效果。遇到不理解的地方，把源码拷出来单跑，改几个参数观察变化，这比反复看演示有效得多。

怎么用它来自学

先通读课件目录，建立整体地图，明确每一段解决什么问题，再进入视频。
核心章节（组件通信、路由、状态管理）不要跳，这几块是后续所有复杂页面的地基。
每完成一个小节，脱离视频自己手写一遍关键代码，再对照源码找差异。
实战章节建议先自己设计一版方案，再回头看老师的实现，对比取舍。
课件笔记适合在写代码卡住时快速定位，不适合当作第一次学习的入口。

适合谁，以及一点提醒

这套资料更适合已经掌握 HTML、CSS 和基本 JavaScript，准备系统进入框架开发的开发者，或者需要补齐 Vue 2 技术栈以维护现有项目的人。如果你的目标是最新的组合式 API 或 Vue 3 生态，这份内容不能直接替代，但组件化思维、路由与状态管理的组织方式依然可以迁移。把源码和课件当成参照物，边看边动手复现，是这套资料最合理的打开方式。

天禹老师的Vue技术全家桶视频教程包含视频共168个、课件资料、代码全都有！

课程推荐

视频目录（168 节）

* 001_尚硅谷Vue技术_课程简介.mp4

* 002_尚硅谷Vue技术_Vue简介.mp4

* 003_尚硅谷Vue技术__Vue官网使用指南.mp4

* 004_尚硅谷Vue技术_搭建Vue开发环境.mp4

* 005_尚硅谷Vue技术_Hello小案例.mp4

* 006_尚硅谷Vue技术_分析Hello案例.mp4

* 007_尚硅谷Vue技术_模板语法.mp4

* 008_尚硅谷Vue技术_数据绑定.mp4

* 009_尚硅谷Vue技术_el与data的两种写法.mp4

* 010_尚硅谷Vue技术_理解MVVM.mp4

* 011_尚硅谷Vue技术_Object.defineProperty.mp4

* 012_尚硅谷Vue技术_理解数据代理.mp4

* 013_尚硅谷Vue技术_Vue中的数据代理.mp4

* 014_尚硅谷Vue技术_事件处理.mp4

* 015_尚硅谷Vue技术_事件修饰符.mp4

* 016_尚硅谷Vue技术_键盘事件.mp4

* 017_尚硅谷Vue技术_事件总结.mp4

* 018_尚硅谷Vue技术_姓名案例.mp4

* 019_尚硅谷Vue技术_计算属性.mp4

* 020_尚硅谷Vue技术_计算属性_简写.mp4

* 021_尚硅谷Vue技术_天气案例.mp4

* 022_尚硅谷Vue技术_监视属性.mp4

* 023_尚硅谷Vue技术_深度监视.mp4

* 024_尚硅谷Vue技术_监视的简写形式.mp4

* 025_尚硅谷Vue技术_watch对比computed.mp4

* 026_尚硅谷Vue技术_绑定class样式.mp4

* 027_尚硅谷Vue技术_绑定style样式.mp4

* 028_尚硅谷Vue技术_条件渲染.mp4

* 029_尚硅谷Vue技术_列表渲染.mp4

* 030_尚硅谷Vue技术_key作用与原理.mp4

* 031_尚硅谷Vue技术_列表过滤.mp4

* 032_尚硅谷Vue技术_列表排序.mp4

* 033_尚硅谷Vue技术_更新时的一个问题.mp4

* 034_尚硅谷Vue技术_Vue监测数据的原理_对象.mp4

* 035_尚硅谷Vue技术_Vue.set()方法.mp4

* 036_尚硅谷Vue技术_Vue监测数据的原理_数组.mp4

* 037_尚硅谷Vue技术_总结Vue监视数据.mp4

* 038_尚硅谷Vue技术_收集表单数据.mp4

* 039_尚硅谷Vue技术_过滤器.mp4

* 040_尚硅谷Vue技术_v-text指令.mp4

* 041_尚硅谷Vue技术_v-html指令.mp4

* 042_尚硅谷Vue技术_v-cloak指令.mp4

* 043_尚硅谷Vue技术_v-once指令.mp4

* 044_尚硅谷Vue技术_v-pre指令.mp4

* 045_尚硅谷Vue技术_自定义指令_函数式.mp4

* 046_尚硅谷Vue技术_自定义指令_对象式.mp4

* 047_尚硅谷Vue技术_自定义指令_总结.mp4

* 048_尚硅谷Vue技术_引出生命周期.mp4

* 049_尚硅谷Vue技术_生命周期_挂载流程.mp4

* 050_尚硅谷Vue技术_生命周期_更新流程.mp4

* 051_尚硅谷Vue技术_生命周期_销毁流程.mp4

* 052_尚硅谷Vue技术_生命周期_总结.mp4

* 053_尚硅谷Vue技术_对组件的理解.mp4

* 054_尚硅谷Vue技术_非单文件组件.mp4

* 055_尚硅谷Vue技术_组件的几个注意点.mp4

* 056_尚硅谷Vue技术_组件的嵌套.mp4

* 057_尚硅谷Vue技术_VueComponent构造函数.mp4

* 058_尚硅谷Vue技术_Vue实例与组件实例.mp4

* 059_尚硅谷Vue技术_一个重要的内置关系.mp4

* 060_尚硅谷Vue技术_单文件组件.mp4

* 061_尚硅谷Vue技术_创建Vue脚手架.mp4

* 062_尚硅谷Vue技术_分析脚手架结构.mp4

* 063_尚硅谷Vue技术_render函数.mp4

* 064_尚硅谷Vue技术_修改默认配置.mp4

* 065_尚硅谷Vue技术_ref属性.mp4

* 066_尚硅谷Vue技术_props配置.mp4

* 067_尚硅谷Vue技术_mixin混入.mp4

* 068_尚硅谷Vue技术_插件.mp4

* 069_尚硅谷Vue技术_scoped样式.mp4

* 070_尚硅谷Vue技术_TodoList案例_静态.mp4

* 071_尚硅谷Vue技术_TodoList案例_初始化列表.mp4

* 072_尚硅谷Vue技术_TodoList案例_添加.mp4

* 073_尚硅谷Vue技术_TodoList案例_勾选.mp4

* 074_尚硅谷Vue技术_TodoList案例_删除.mp4

* 075_尚硅谷Vue技术_TodoList案例_底部统计.mp4

* 076_尚硅谷Vue技术_TodoList案例_底部交互.mp4

* 077_尚硅谷Vue技术_TodoList案例_总结.mp4

* 078_尚硅谷Vue技术_浏览器本地存储.mp4

* 079_尚硅谷Vue技术_TodoList_本地存储.mp4

* 080_尚硅谷Vue技术_组件自定义事件_绑定.mp4

* 081_尚硅谷Vue技术_组件自定义事件_解绑.mp4

* 082_尚硅谷Vue技术_组件自定义事件_总结.mp4

* 083_尚硅谷Vue技术_TodoList案例_自定义事件.mp4

* 084_尚硅谷Vue技术_全局事件总线1.mp4

* 085_尚硅谷Vue技术_全局事件总线2.mp4

* 086_尚硅谷Vue技术_TodoList案例_事件总线.mp4

* 087_尚硅谷Vue技术_消息订阅与发布_pubsub.mp4

* 088_尚硅谷Vue技术_TodoList案例_pubsub.mp4

* 089_尚硅谷Vue技术_TodoList案例_编辑.mp4

* 090_尚硅谷Vue技术_$nextTick.mp4

* 091_尚硅谷Vue技术_动画效果.mp4

* 092_尚硅谷Vue技术_过度效果.mp4

* 093_尚硅谷Vue技术_多个元素过度.mp4

* 094_尚硅谷Vue技术_集成第三方动画.mp4

* 095_尚硅谷Vue技术_总结过度与动画.mp4

* 096_尚硅谷Vue技术_配置代理_方式一.mp4

* 097_尚硅谷Vue技术_配置代理_方式二.mp4

* 098_尚硅谷Vue技术_github案例_静态组件.mp4

* 099_尚硅谷Vue技术_github案例_列表展示.mp4

* 100_尚硅谷Vue技术_github案例_完善案例.mp4

* 101_尚硅谷Vue技术_vue-resource.mp4

* 102_尚硅谷Vue技术_默认插槽.mp4

* 103_尚硅谷Vue技术_具名插槽.mp4

* 104_尚硅谷Vue技术_作用域插槽.mp4

* 105_尚硅谷Vue技术_Vuex简介.mp4

* 106_尚硅谷Vue技术_求和案例_纯vue版.mp4

* 107_尚硅谷Vue技术_Vuex工作原理图.mp4

* 108_尚硅谷Vue技术_搭建Vuex环境.mp4

* 109_尚硅谷Vue技术_求和案例_vuex版.mp4

* 110_尚硅谷Vue技术_vuex开发者工具的使用.mp4

* 111_尚硅谷Vue技术_getters配置项.mp4

* 112_尚硅谷Vue技术_mapState与mapGetters.mp4

* 113_尚硅谷Vue技术_mapActions与mapMutations.mp4

* 114_尚硅谷Vue技术_多组件共享数据.mp4

* 115_尚硅谷Vue技术_vuex模块化+namespace_1.mp4

* 116_尚硅谷Vue技术_vuex模块化+namespace_2.mp4

* 117_尚硅谷Vue技术_路由的简介.mp4

* 118_尚硅谷Vue技术_路由基本使用.mp4

* 119_尚硅谷Vue技术_几个注意点.mp4

* 120_尚硅谷Vue技术_嵌套路由.mp4

* 121_尚硅谷Vue技术_路由的query参数.mp4

* 122_尚硅谷Vue技术_命名路由.mp4

* 123_尚硅谷Vue技术_路由的params参数.mp4

* 124_尚硅谷Vue技术_路由的props配置.mp4

* 125_尚硅谷Vue技术_router-link的replace属性.mp4

* 126_尚硅谷Vue技术_编程式路由导航.mp4

* 127_尚硅谷Vue技术_缓存路由组件.mp4

* 128_尚硅谷Vue技术_两个新的生命周期钩子.mp4

* 129_尚硅谷Vue技术_全局前置_路由守卫.mp4

* 130_尚硅谷Vue技术_全局后置_路由守卫.mp4

* 131_尚硅谷Vue技术_独享路由守卫.mp4

* 132_尚硅谷Vue技术_组件内路由守卫.mp4

* 133_尚硅谷Vue技术_history模式与hash模式.mp4

* 134_尚硅谷Vue技术_element-ui基本使用.mp4

* 135_尚硅谷Vue技术_element-ui按需引入.mp4

* 136_尚硅谷Vue3技术_vue3简介.mp4

* 137_尚硅谷Vue3技术_使用vue-cli创建工程.mp4

* 138_尚硅谷Vue3技术_使用vite创建工程.mp4

* 139_尚硅谷Vue3技术_分析工程结构.mp4

* 140_尚硅谷Vue3技术_安装开发者工具.mp4

* 141_尚硅谷Vue3技术_初识setup.mp4

* 142_尚硅谷Vue3技术_ref函数_处理基本类型.mp4

* 143_尚硅谷Vue3技术_ref函数_处理对象类型.mp4

* 144_尚硅谷Vue3技术_reactive函数.mp4

* 145_尚硅谷Vue3技术_回顾Vue2的响应式原理.mp4

* 146_尚硅谷Vue3技术_Vue3响应式原理_Proxy.mp4

* 147_尚硅谷Vue3技术_Vue3响应式原理_Reflect.mp4

* 148_尚硅谷Vue3技术_reactive对比ref.mp4

* 149_尚硅谷Vue3技术_setup的两个注意点.mp4

* 150_尚硅谷Vue3技术_computed计算属性.mp4

* 151_尚硅谷Vue3技术_watch监视ref定义的数据.mp4

* 152_尚硅谷Vue3技术_watch监视reactive定义的数据.mp4

* 153_尚硅谷Vue3技术_watch时value的问题.mp4

* 154_尚硅谷Vue3技术_watchEffect函数.mp4

* 155_尚硅谷Vue3技术_Vue3生命周期.mp4

* 156_尚硅谷Vue3技术_自定义hook.mp4

* 157_尚硅谷Vue3技术_toRef与toRefs.mp4

* 158_尚硅谷Vue3技术_shallowReactive与shallowRef.mp4

* 159_尚硅谷Vue3技术_readonly与shallowReadonly.mp4

* 160_尚硅谷Vue3技术_toRaw与markRaw.mp4

* 161_尚硅谷Vue3技术_customRef.mp4

* 162_尚硅谷Vue3技术_provide与inject.mp4

* 163_尚硅谷Vue3技术_响应式数据的判断.mp4

* 164_尚硅谷Vue3技术_CompositionAPI的优势.mp4

* 165_尚硅谷Vue3技术_Fragment组件.mp4

* 166_尚硅谷Vue3技术_Teleport组件.mp4

* 167_尚硅谷Vue3技术_Suspense组件.mp4

* 168_尚硅谷Vue3技术_Vue3中其他的改变.mp4