从基础语法到组件化实战
这套资料针对前端初学者在脱离教程后难以独立构建完整应用的痛点。它不只罗列 Vue3 的 API，而是将 HTML、CSS、JS 基础与 Vue 核心机制串联起来，重点解决“知道怎么写代码，但不知道如何组织项目结构”的问题。通过 Vite 构建工具和 Pinia 状态管理，课程展示了现代前端工程化的标准流程。适合具备基本计算机操作能力，或了解少量 HTML/CSS 标签的零基础开发者。如果你之前只接触过 jQuery 或原生 JS 的简单操作，这套内容能帮你平滑过渡到声明式编程思维，理解响应式数据背后的逻辑，而不仅仅是复制粘贴代码片段。
建议的学习路径与重点
建议按照“基础语法铺垫 -> 核心机制深入 -> 工程化与状态管理”的顺序进行。首先快速过一遍 HTML、CSS 和 JS 的数据类型与结构部分，这部分是后续理解 DOM 操作和逻辑控制的基石，但不要陷入复杂的算法题，只需掌握数组、对象和基本函数即可。接着是核心部分，重点攻克 Vue 的组件系统：从 defineProps 传值到 emit 事件通信，再到插槽（Slot）的使用，这是构建可复用 UI 模块的关键。特别是 watch 监听器与生命周期钩子的配合，决定了数据更新的时机与副作用处理。最后，结合 Pinia 学习全局状态管理，理解单向数据流在大型项目中的必要性。不要跳过 Vite 的配置环节，理解构建工具如何优化开发体验，能为后续接入复杂依赖打下基础。
学完能做什么及资料配合方法
完成学习后，你应能独立搭建一个包含多页面路由、全局状态共享和 API 数据交互的单页应用（SPA）。具体产出可以是个人博客、待办事项管理工具或简单的电商前端展示页，重点在于实现组件间的解耦通信和数据持久化。资料包中的视频适合对照练习，建议每看完一个关于 watch 或组件通信的章节，立即在本地项目中动手复现一个类似功能，例如实现一个带搜索过滤的列表，并尝试用 Pinia 管理搜索关键词。遇到报错时，不要直接看答案，先阅读控制台错误信息，结合文档理解报错原因。这种“看一段、写一段、调通一段”的节奏，比单纯看完所有视频更能加深记忆，确保你能将知识点转化为实际解决问题的能力，为后续深入学习 TypeScript 或全栈开发奠定扎实的工程基础。
课程目录
100_17 Vue使用watch监听数据变化.mp4 25.67M 101_18 Vue watch 多个数据变化.mp4 25.94M 102_19 Vue watch对象项目.mp4 33.19M 103_20 Vue键盘修饰符.mp4 93.94M 104_21 Vue鼠标修饰符.mp4 24.94M 105_01 什么是Vue组件.mp4 37.34M 106_02 Vue自定义组件初体验.mp4 35.36M 107_03 Vue组件传值defineProps.mp4 30.79M 108_04 Vue组件传值可选配置.mp4 13.54M 109_05 Vue组件自定义校验.mp4 25.94M 10_05 理解数据类型.mp4 5.07M 110_06 Vue组件单向数据流.mp4 33.52M 111_07 Vue组件定义emit事件.mp4 21.71M 112_08 Vue组件emit事件传递参数.mp4 8.09M 113_09 Vue插槽Slot介绍与使用.mp4 36.29M 114_10 Vue具名插槽-命名插槽.mp4 31.83M 115_11 Vue共享数据的发布和订阅.mp4 16.75M 116_12 Vue Provide和Inject发布和订阅数据.mp4 36.45M 117_13 Vue 发布函数修改provide的数据.mp4 36.06M 118_14 Vue发布只读数据.mp4 23.75M 119_15 Vue生命周期了解.mp4 23.04M 11_06 理解数据结构.mp4 11.75M 120_16 Vue生命周期钩子函数使用.mp4 58.99M 121_01 什么是状态管理器Pinia.mp4 33.55M 122_02 Vue状态管理基本使用.mp4 72.27M 123_03 Vue状态管理全局数据修改.mp4 46.46M 124_04 Vue状态管理Actions传递参数.mp4 4.42M 125_05 Vue路由管理vue router介绍.mp4 38.62M 126_06 Vue Router Hash和History.mp4 21.00M 127_07 Vue Router Vite初体验.mp4 69.42M 128_08 Vue Router push和replace.mp4 9.24M 129_09 Vue Router动态路由.mp4 27.66M 12_07 数组的使用场景.mp4 9.40M 130_10 Vue Router通过js跳转路由.mp4 21.18M 131_11 Vue Router路由调整传递参数.mp4 44.61M 132_12 Vue useRouter和useRoute.mp4 10.38M 133_13 Vue Router路由懒加载.mp4 30.59M 134_14 Vue Router路由嵌套.mp4 65.62M 135_15 Vue Router路由全局守卫.mp4 55.79M 136_16 Vue Router路由独享守卫.mp4 22.62M 137_17 Axios后端接口调用介绍.mp4 19.21M 138_18 Axios初体验-发送Get请求.mp4 85.16M 139_19 Axios添加请求参数.mp4 28.20M 13_08 列表的使用场景.mp4 4.73M 140_20 Axios请求数据双向绑定.mp4 38.62M 141_21 Axios使用请求配置调用接口.mp4 28.84M 142_22 Axios创建和发送post类型的请求.mp4 34.03M 143_23 Axios接口超时配置.mp4 24.06M 144_24 Axios自定义请求头.mp4 19.80M 145_25 Axios定义全局配置.mp4 23.78M 146_26 Axios拦截器介绍.mp4 16.49M 147_27 Axios请求拦截器.mp4 33.29M 148_28 Axios响应拦截器.mp4 47.37M 149_29 Axios接口封装.mp4 49.75M 14_09 对象的使用场景.mp4 7.21M 150_30 Axios接口封装测试.mp4 36.89M 151_01 脚手架项目及ElementPlus演示.mp4 25.15M 152_02 脚手架项目基本配置.mp4 58.88M 153_03 使用Git管理项目.mp4 16.34M 154_04 登录页-路由及登录框实现.mp4 24.19M 155_05 登录页-实现用户名密码和登录按钮.mp4 66.03M 156_06 登录页-实现输入框清空和密码显示功能.mp4 15.36M 157_07 登录页-实现用户登录输入校验.mp4 26.02M 158_08 登录页-根据校验结果设置登录的禁用状态.mp4 35.74M 159_09 登录逻辑-实现登录调用后台接口.mp4 40.95M 15_10 强类型和弱类型语言.mp4 4.85M 160_10 登录逻辑-接口地址和接口方法的封装.mp4 83.13M 161_11 登录逻辑-实现JWT Token的存储.mp4 19.67M 162_12 登录逻辑-实现请求头添加认证Token.mp4 38.61M 163_13 登录逻辑-判断登录状态是否已失效.mp4 39.15M 164_14 登录逻辑-实现首页路由并且登录后自动跳转.mp4 21.11M 165_15 登录逻辑-实现页面未登录的请求拦截.mp4 46.99M 166_16 登录逻辑-登录框样式调整.mp4 35.03M 167_17 Layout-实现layout的拆分.mp4 40.85M 168_18 Layout-实现网页的标准布局.mp4 59.29M 169_19 Layout-Aside Logo信息展示设计.mp4 82.90M 16_11 运算符分类.mp4 9.98M 170_20 Layout-Logo点击跳转及样式修复.mp4 40.21M 171_21 Layout-Aside菜单实现.mp4 74.40M 172_22 Layout-自动生成菜单配置梳理.mp4 50.77M 173_23 Layout-实现菜单的自动生成.mp4 86.54M 174_24 Layout-使用iconfont定义菜单图标.mp4 72.35M 175_25 用户管理-实现用户管理的路由映射.mp4 49.05M 176_26 用户管理-实现菜单根据路由默认激活.mp4 8.39M 177_27 用户管理-el-table使用详情介绍.mp4 82.20M 178_28 用户管理-获取后端数据并展示.mp4 120.58M 179_29 用户管理-自动获取用户列表及加载效果.mp4 41.96M 17_12 数学、逻辑、比较运算符使用.mp4 8.20M 180_30 用户管理-实现删除功能和删除确认.mp4 75.21M 181_31 用户管理-添加用户弹窗功能实现.mp4 32.70M 182_32 用户管理-添加用户页面组件实现.mp4 43.42M 183_33 用户管理-表单一键清空功能实现.mp4 25.99M 184_34 用户管理-实现表单提交功能.mp4 76.46M 185_35 用户管理-实现表单的验证.mp4 18.32M 186_36 用户管理-实现删除后自动更新数据.mp4 10.31M 187_37 用户管理-实现添加数据后自动刷新列表.mp4 10.93M 188_38 用户管理-实现关闭弹窗自动刷新列表.mp4 34.20M 189_39 用户管理-实现编辑功能的组件.mp4 56.51M 18_13 理解逻辑控制.mp4 13.50M 190_40 用户管理-实现编辑功能接口调用及自动刷新.mp4 70.49M 191_41 用户管理-解决form表单无法清空的问题.mp4 29.29M 192_42 Header-实现Header功能的布局.mp4 48.26M 193_43 Header-实现用户退出的功能.mp4 54.71M 194_44 Header-使用pinia管理菜单的折叠状态.mp4 61.63M 195_45 Header-实现Aside的折叠功能.mp4 33.39M 196_46 Header-解决折叠卡顿的问题.mp4 33.20M 197_47 上线-vue多环境配置-不同环境不同配置.mp4 111.57M 198_48 上线-前端代码部署上线流程.mp4 31.12M 199_49 上线-使用Docker容器部署前端Vue代码.mp4 48.67M 19_14 条件语句和循环语句使用场景.mp4 9.18M 1_00 云原生开发课程介绍_fix_code_jd.mp4 71.98M 200_50 上线-使用K8s部署Vue前端代码.mp4 23.52M 201_51 脚手架项目总结.mp4 21.45M 20_15 理解函数.mp4 8.27M 21_16 代码开发规范的重要性.mp4 4.67M 22_17 代码开发命名规范.mp4 8.77M 23_18 代码开发注释规范.mp4 2.36M 24_00 程序开发代码管理内容介绍说明.mp4 9.69M 25_01 为什么需要代码管理.mp4 13.45M 26_02 主流代码仓库介绍.mp4 3.82M 27_03 GitBash安装及配置.mp4 20.42M 28_04 Git仓库管理.mp4 40.08M 29_05 Git命令详解.mp4 44.69M 2_01 课程大纲详解fix_code_1.3jq.mp4 102.62M 30_07 Git分支管理.mp4 87.84M 31_08 Git版本管理.mp4 43.01M 32_01 VSCode的安装.mp4 16.65M 33_02 VSCode集成前端开发工具包.mp4 59.45M 34_03 认识HTML.mp4 5.75M 35_04 HTML5基本结构.mp4 13.02M 36_05 HTML初体验.mp4 25.09M 37_06 HTML文本标签.mp4 39.40M 38_07 HTML有序和无序列表.mp4 19.30M 39_08 HTML描述列表.mp4 12.06M 3_02 项目演示_1.3倍速.mp4 50.24M 40_09 HTML表格使用.mp4 21.72M 41_10 HTML表格行列标题.mp4 18.86M 42_11 HTML超链接-外部链接.mp4 19.91M 43_12 HTML内部链接和锚点链接.mp4 32.44M 44_13 HTML超链接特殊用法.mp4 10.46M 45_14 HTML图片标签img.mp4 18.61M 46_15 HTML表单标签form.mp4 17.09M 47_16 HTML输入框input.mp4 27.59M 48_17 HTML输入框input常用属性.mp4 13.80M 49_18 HTML容器标签div.mp4 38.20M 4_为什么要学这门课程.mp4 21.93M 50_19 CSS初识.mp4 30.46M 51_20 CSS颜色和大小设置.mp4 53.61M 52_21 CSS位置和内外边距设置.mp4 68.80M 53_22 CSS边框设置.mp4 19.41M 54_23 CSS背景设置.mp4 28.96M 55_24 CSS内部样式表.mp4 36.36M 56_25 CSS外部导入样式表.mp4 30.50M 57_26 CSS类选择器.mp4 27.07M 58_27 CSS ID选择器.mp4 22.53M 59_28 CSS后代选择器.mp4 14.30M 5_00 程序开发通用思想内容介绍说明.mp4 12.77M 60_29 CSS子选择器.mp4 20.23M 61_30 CSS兄弟选择器.mp4 15.05M 62_31 CSS网页布局display.mp4 55.28M 63_32 CSS网页布局flex.mp4 36.03M 64_33 CSS网页布局-flex排列方向.mp4 34.45M 65_34 CSS网页布局-flex对齐方式.mp4 23.88M 66_01 什么是JavaScript.mp4 5.16M 67_02 JavaScript初体验.mp4 26.61M 68_03 JavaScript操作window.mp4 48.96M 69_04 JavaScript操作DOM.mp4 58.55M 6_01 认识开发语言.mp4 15.56M 70_05 JavaScript修改网页样式.mp4 39.40M 71_06 JavaScript实现元素的显示和隐藏.mp4 30.45M 72_07 JavaScript常用数据类型.mp4 26.95M 73_08 JavaScript定义变量和类型判断.mp4 46.55M 74_09 JavaScript对象和数组操作.mp4 54.13M 75_10 JavaScript数学运算符.mp4 32.10M 76_11 JavaScript比较运算符.mp4 18.97M 77_12 JavaScript逻辑运算符.mp4 18.35M 78_13 JavaScript流程控制if-else.mp4 23.89M 79_14 JavaScript流程控制switch.mp4 13.59M 7_02 开发语言对比和擅长领域分析.mp4 23.10M 80_15 JavaScript循环for和while.mp4 42.52M 81_16 JavaScript循环forEach.mp4 10.82M 82_17 JavaScript定义函数.mp4 22.03M 83_18 JavaScript箭头函数.mp4 13.74M 84_01 什么是Vue-hc.mp4 38.57M 85_02 为什么要使用Vue.mp4 5.45M 86_03 Vue初体验-实现计数器.mp4 20.50M 87_04 Vue应用程序原理.mp4 38.30M 88_05 Vue3和Vue2语法区别.mp4 33.14M 89_06 Vue Vite项目工程化.mp4 28.51M 8_03 什么是解释型和编译型语言.mp4 8.75M 90_07 Vue工程化项目详解_hc_jq.mp4 83.84M 91_08 Vue setup ref和reactive的区别.mp4 41.12M 92_09 Vue定义只读数据.mp4 10.52M 93_10 Vue指令v-on.mp4 24.19M 94_11 Vue指令v-model.mp4 28.67M 95_12 Vue指令v-model修饰符.mp4 12.22M 96_13 Vue指令v-show.mp4 37.97M 97_14 Vue指令v-if-else.mp4 27.07M 98_15 Vue指令v-for.mp4 79.78M 99_16 Vue computed和methods区别声音变大.mp4 83.72M 9_04 理解变量和常量.mp4 5.64M ——/云原生开发】Vue3、Vite、Pinia、Axios、HTML、JS、CSS入门到项目实战/├──100_17 Vue使用watch监听数据变化.mp4 25.67M├──101_18 Vue watch 多个数据变 51CTO-【云原生开发】Vue3、Vite、Pinia、Axios、HTML、JS、CSS入门到项目实战【VIP】
