人工精选尚硅谷Vue技术全家桶（天禹老师主讲）
这套 Vue 全家桶课程，主讲是天禹老师，视频量在 168 个左右，配套课件和代码都齐全。它不是那种"看完就会"的速成包，而是一套需要你动手敲、动手改的完整前端入门到工程化的训练。下面从几个实际角度帮你判断它值不值得花时间。 它解决的是哪一类工作场景 如果你现在的工作是写静态页面、用 jQuery
会员可免费下载本篇月会员可免费领取。
开通会员 ›会员 · 按档位
游客按标价购买，不享受上表折扣。
支付成功后自动发放网盘链接，链接失效可找客服免费补
这套 Vue 全家桶课程，主讲是天禹老师，视频量在 168 个左右，配套课件和代码都齐全。它不是那种"看完就会"的速成包，而是一套需要你动手敲、动手改的完整前端入门到工程化的训练。下面从几个实际角度帮你判断它值不值得花时间。
它解决的是哪一类工作场景
如果你现在的工作是写静态页面、用 jQuery 做交互，或者只会把设计稿切成 HTML/CSS，那这套课针对的正是"从页面制作者变成前端开发者"这一段跨越。它覆盖的是企业里真实在用的 Vue 开发方式：组件拆分、状态管理、路由跳转、接口请求、打包部署。学完之后你能独立接手的，是那种"给一套后台管理界面，从前端架子到联调上线自己走一遍"的活，而不是只会改改样式。
学完能独立做什么
- 用 Vue 的组件化思路搭出一个多页面的单页应用，包括登录、列表、详情、表单这类常见模块。
- 用路由管理页面跳转和权限控制，用状态管理工具处理跨组件的数据共享，不再靠一层层传参。
- 对接后端接口，处理请求、响应、加载状态和错误提示，把数据和界面串起来。
- 走一遍工程化的流程：脚手架初始化、目录组织、打包构建，知道每个配置文件在管什么。
注意，这里说的是"能独立做"，前提是你跟着把代码敲完，而不是只看视频。光看不动手，168 个视频看完也还是不会写。
资料适合什么基础的人
这套课对零基础前端不算友好。它默认你已经会 HTML、CSS 和 JavaScript 基础语法，比如变量、函数、数组方法、对象操作、this 指向这些。如果你连 ES6 的箭头函数、解构、模块导入导出都没接触过，建议先把这些补上再进来，否则中段会卡得很厉害。
比较适合的是三类人：一是转行做前端、已经自学过基础语法的；二是后端或测试想补前端、需要能看懂和改动前端项目的；三是在职但一直用老技术栈、想系统换到 Vue 体系的。对纯小白来说，它不是第一门课，更适合当第二门。
怎么用这套资料效率更高
视频、课件、代码三者别分开用。看一节之前先扫一眼对应的课件，知道这节要解决什么问题；看的时候跟着敲，遇到报错先自己查，查不出来再看代码里是怎么写的；看完一节用自己的话把关键点记两三行，不用抄目录，只记"这节教会我什么"。每完成两三个小节，回头把这几节串成一个小练习，比如自己写一个待办列表或者一个简单的搜索页。
后期进入综合实战部分时，不要照抄代码。先看需求，自己试着搭结构，卡住了再对照参考实现。这样走完一遍，你手里会多出一个能写进作品集的完整项目，面试时也有东西可讲，而不是只能说"我学过 Vue"。
一个提醒
168 个视频听起来多，但拆到每天两三节，一个多月能过完。真正决定效果的不是你看了多少，而是你独立写过多少。这套资料的价值在于它把知识点和工程实践串在了一条线上，省去你自己东拼西凑找教程的时间。如果你能坚持动手，它够用；如果你只想囤着以后再看，那再全的资料也只是占硬盘。
天禹老师的Vue技术全家桶视频教程 包含视频共168个、课件资料、代码 全都有！
课程推荐
《尚硅谷Vue技术全家桶（天禹老师主讲）》天禹老师的Vue技术全家桶视频教程 包含视频共168个、课件资料、代码 全都有！【技能收获】学完可掌握：Vue / 前端工程化、React 前端。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认证 + 实战项目组合能显著提升面试通过率，适合向中高级运维或架构岗进阶。 若你已有一定编程或运维基础，本课程可帮助你在现有技能栈上快速叠加热门方向能力，提升求职时的项目说服力与薪资谈判空间。
视频目录（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
同类课程
和你正在看的这门一个方向
前端开发1
永久有效 · 网盘发货
前端开发妙码学院《2025大前端架构师训练营》
永久有效 · 网盘发货
前端开发Vue3.5+Electron+大模型 跨平台AI桌面聊天应用实战
永久有效 · 网盘发货
前端开发Vibe Coding 实战开发指南 用Claude Code Cursor和Codex极速打造全栈应用
永久有效 · 网盘发货
前端开发不用深厚基础的 Codex 商用 Web 项目开发 + 变现完整教学包
永久有效 · 网盘发货
前端开发AI编程实战课：VUE+Django+MySQL开发大型网站项目，从入门到项目落地，AI助力编程小白逆袭
永久有效 · 网盘发货