这门课在解决什么实际问题？
前端开发领域技术栈迭代极快，对于初级人员或转行者而言，最大的痛点并非单一技术的入门，而是“只会一种框架，跨框架就无从下手”。市面上许多课程往往只讲 Vue 或只讲 React，导致学习者在面对不同公司的技术选型时极为被动。这套教程的核心价值在于它采取了对比学习的策略，将 Vue3、React18 和 TypeScript 4 放在同一个知识体系中进行串联。它并不是简单地把三个框架的官方文档念一遍，而是试图厘清它们各自的核心理念差异——比如 Vue 的响应式数据驱动与 React 的单向数据流和虚拟 DOM 机制有何异同，以及在 TypeScript 类型系统的约束下，如何在不同的框架中实现类型安全的组件开发。这种横向对比的学习方式，能帮助初学者跳出“只会写样板代码”的困境，建立起对现代前端工程化体系的宏观认知。
适合什么样的基础与学习阶段？
本课程明确指向“真正的初级前端同学”，这意味着它要求你具备最基础的 HTML、CSS 和 JavaScript 语法知识，但不需要任何框架实战经验。如果你是计算机专业的在校生，或者是在传统网站制作领域工作多年、从未接触过现代 SPA（单页应用）开发的前端小白，这套课程非常适合作为你的第一套系统性入门指南。它没有预设你了解 Webpack、Vite 或复杂的构建工具链，而是从概念剖析入手，逐步深入到技术实战。值得注意的是，虽然它面向零基础，但进度并不缓慢，因为它涵盖了三大热门技术，学习容量较大。如果你已经熟练掌握了 Vue2 并想转型 React，或者已经熟悉 React 想补齐 Vue 的短板，这门课也能提供高效的对照学习体验，帮助你快速补齐技术栈的盲区，达到初级岗位的实际用人标准。
学完能做什么及资料如何使用？
完成本课程的学习后，你将不再局限于单一的技术生态，而是能够独立胜任主流互联网公司的初级前端开发岗位。具体而言，你应能使用 Vue3 结合 TypeScript 快速搭建后台管理系统，也能用 React18 开发交互复杂的前端页面，并理解两者在组件设计模式上的优劣。为了最大化学习效果，建议不要按顺序平铺直读，而是采取“对比—实践—复盘”的策略。首先，重点观看 TypeScript 基础部分，因为它是贯穿三个框架的基石；接着，可以并行对比 Vue3 和 React18 中关于状态管理、路由配置以及列表渲染的代码实现，观察同一需求在不同框架下的写法差异；最后，务必跟随教程中的实战项目动手敲代码，切忌只看不动手。资料包中通常包含完整的代码示例和项目结构，建议在学习每个章节时，同步打开项目源码，逐个功能模块进行对照和修改，这样才能真正将知识点转化为独立开发的能力。
课程目录
├── 第1章课程导学-了解本课程必看/ │ ├── [ 65M] 1-1课程介绍与学习指南.mp4 │ ├── [ 37K] 1-2课件获取方式及软件版本说明.pdf │ ├── [ 21K] 1-3项目在线访问地址.pdf │ └── [101K] 1-4Vue、React、TS的发展历史.pdf ├── 第2章Vue3核心概念及选项式API-入门Vue3第一步/ │ ├── [ 60M] 2-10表单处理与双向数据绑定原理.mp4 │ ├── [105M] 2-11生命周期钩子函数及原理分析.mp4 │ ├── [ 74M] 2-12搜索关键词加筛选条件的综合案例.mp4 │ ├── [8.1M] 2-13章节总结.mp4 │ ├── [ 23M] 2-1章节介绍.mp4 │ ├── [106M] 2-2MVC设计模式与MVVM设计模式.mp4 │ ├── [ 50M] 2-3选项式API的编程风格与优势.mp4 │ ├── [ 88M] 2-4声明式渲染及响应式数据实现原理【更多it资源 www.】.mp4 │ ├── [ 96M] 2-5指令系统与事件方法及传参处理.mp4 │ ├── [ 82M] 2-6计算属性与侦听器区别与原理（一）.mp4 │ ├── [ 78M] 2-7计算属性与侦听器区别与原理（二）.mp4 │ ├── [130M] 2-8条件渲染与列表渲染及注意点.mp4 │ └── [ 48M] 2-9class样式与style样式的三种形态.mp4 ├── 第3章Vue3组件应用及单文件组件-抽象独立的代码/ │ ├── [ 50M] 3-10脚手架原理之webpack处理样式模块和图片模块.mp4 │ ├── [ 39M] 3-11脚手架原理之webpack处理单文件组件及loader转.mp4 │ ├── [157K] 3-12Vite3介绍及基本使用.pdf │ ├── 3-13仿ElementPlus的el-rate评分组件实现单.mp4 │ ├── [7.4M] 3-14章节总结.mp4 │ ├── [ 12M] 3-1章节介绍.mp4 │ ├── [122M] 3-3组件之间是如何进行互相通信的.mp4 │ ├── [ 62M] 3-4组件的属性与事件是如何进行处理的.mp4 │ ├── [ 67M] 3-5组件的内容是如何组合与分发处理的.mp4 │ ├── [ 59M] 3-6仿ElementPlus框架的el-button按钮组件实.mp4 │ ├── [109M] 3-7单文件组件SFC及VueCLI脚手架的安装使用.mp4 │ └── [112M] 3-8脚手架原理之webpack处理html文件和模块打包.mp4 ├── 第4章Vue3语法系统进阶-全面掌握Vue3特性/ │ ├── [ 50M] 4-10异步组件与Suspense一起使用.mp4 │ ├── [ 56M] 4-11跨组件间通信方案Provide_Inject.mp4 │ ├── [ 65M] 4-12Teleport实现传送门功能.mp4 │ ├── [ 58M] 4-13虚拟DOM与render函数及Diff算法.mp4 │ ├── [ 11M] 4-14章节总结.mp4 │ ├── [7.2M] 4-1章节介绍.mp4 │ ├── [ 58M] 4-2ref属性在元素和组件上的分别使用.mp4 │ ├── [ 36M] 4-3利用nextTick监听DOM更新后的情况.mp4 │ ├── [ 87M] 4-4自定义指令与自定义全局属性及应用场景.mp4 │ ├── [ 35M] 4-5复用组件功能之Mixin混入【更多it资源 www.】.mp4 │ ├── [ 56M] 4-6插件的概念及插件的实现.mp4 │ ├── [ 77M] 4-7ElementPlus框架的安装与使用.mp4 │ ├── [ 68M] 4-8transition动画与过渡的实现.mp4 │ └── [ 53M] 4-9动态组件与keep-alive组件缓存.mp4 ├── 第5章Vue3组合式API详解-大型应用的高端写法/ │ ├── [ 66M] 5-10利用组合式API开发搜索提示列表.mp4 │ ├── [ 42M] 5-11利用组合式API开发搜索结果列表.mp4 │ ├── [ 82M] 5-12利用组合式API开发搜索历史列表.mp4 │ ├── [4.7M] 5-13章节总结.mp4 │ ├── [ 18M] 5-1章节介绍.mp4 │ ├── [ 57M] 5-3事件方法_计算属性_reactive_toRefs.mp4 │ ├── [ 80M] 5-4生命周期_watch_watchEffect-1.mp4 │ ├── [ 53M] 5-5生命周期_watch_watchEffect-2.mp4 │ ├── [ 69M] 5-6跨组件通信方案provide_inject.mp4 │ ├── [ 44M] 5-7复用组件功能之use函数.mp4 │ ├── [ 38M] 5-8利用defineProps与defineEmits进行组件.mp4 │ └── [ 51M] 5-9利用组合式API开发复杂的搜索功能.mp4 ├── 第6章VueRouter路由与Vuex状态管理-组织与架构应用/ │ ├── [ 57M] 6-10Vuex共享状态的基本开发流程.mp4 │ ├── [ 53M] 6-11Vuex处理异步状态及应用场景.mp4 │ ├── [ 46M] 6-12Vuex计算属性和辅助函数的使用.mp4 │ ├── [ 44M] 6-13Vuex-persist对数据进行持久化处理.mp4 │ ├── [ 69M] 6-14Vuex分割模块及多状态管理.mp4 │ ├── [ 43M] 6-15组合式API中使用Router和Vuex注意事项.mp4 │ ├── [ 95K] 6-17Vue状态管理之Pinia存储库.pdf │ ├── [155M] 6-18搭建Vite3+Pinia2组合模式.mp4 │ ├── [ 11M] 6-19章节总结.mp4 │ ├── [ 21M] 6-1章节介绍.mp4 │ ├── [ 80K] 6-2什么是前端路由以及路由两种模式实现原理.pdf │ ├── [ 79M] 6-3路由的基本搭建与嵌套路由模式.mp4 │ ├── [ 52M] 6-4动态路由模式与编程式路由模式.mp4 │ ├── [ 51M] 6-5命名路由与命名视图与路由元信息.mp4 │ ├── [ 52M] 6-6路由传递参数的多种方式及应用场景.mp4 │ ├── [ 51M] 6-7详解route对象与router对象.mp4 │ ├── [ 74M] 6-8路由守卫详解及应用场景.mp4 │ └── [ 71K] 6-9Vuex状态管理的概念及组件通信的总结.pdf ├── 第7章TS4类型系统之基础使用-TS4带来的编码优势/ │ ├── [ 57M] 7-10函数类型与void类型.mp4 │ ├── [ 74M] 7-11函数重载与可调用注解.mp4 │ ├── [ 69M] 7-12枚举类型与const枚举.mp4 │ ├── [8.9M] 7-13章节总结.mp4 │ ├── [6.5M] 7-1章节介绍.mp4 │ ├── [125M] 7-2为什么使用TS和TS运行环境搭建.mp4 │ ├── [ 34M] 7-3类型声明空间与变量声明空间.mp4 │ ├── [ 24M] 7-4类型注解与类型推断.mp4 │ ├── [ 50M] 7-5类型分类与联合类型与交叉类型.mp4 │ ├── [ 63M] 7-6never类型与any类型与unknown类型.mp4 │ ├── [ 33M] 7-7类型断言与非空断言.mp4 │ ├── [ 31M] 7-8数组类型与元组类型.mp4 │ └── [ 67M] 7-9对象类型与索引签名.mp4 ├── 第8章TS4类型系统之进阶使用-带您探索类型的世界/ │ ├── [9.2M] 8-10章节总结.mp4 │ ├── [5.7M] 8-1章节介绍.mp4 │ ├── [ 61M] 8-2详解接口与类型别名之间区别.mp4 │ ├── [ 43M] 8-3字面量类型和keyof关键字.mp4 │ ├── [ 63M] 8-4类型保护与自定义类型保护.mp4 │ ├── [ 97M] 8-5定义泛型和泛型常见操作.mp4 │ ├── [ 42M] 8-6类型兼容性详解.mp4 │ ├── [104M] 8-7映射类型与内置工具类型.mp4 │ ├── [ 93M] 8-8条件类型和infer关键字.mp4 │ └── [ 76M] 8-9类中如何使用类型.mp4 └── 第9章TS4扩展内容与Vue3结合使用-融会贯通TS结合Vue/ ├── [ 69M] 9-10VueRouter路由如何使用TS.mp4 ├── [ 71M] 9-11Vuex状态管理如何使用TS.mp4 ├── [ 82M] 9-12-1Vuex状态管理如何使用TS.mp4 ├── [ 49K] 9-13Pinia状态管理如何使用TS【更多it资源 www.】.pdf ├── [ 49M] 9-14ElementPlus中如何使用TS.mp4 ├── [8.3M] 9-15章节总结.mp4 ├── [ 11M] 9-1章节介绍.mp4 ├── [ 77M] 9-2d.ts声明文件和declare关键字.mp4 ├── [ 49M] 9-3@types和DefinitelyTyped仓库.mp4 ├── [ 32M] 9-4lib.d.ts和global.d.ts.mp4 ├── [185M] 9-5详解tsconfig.json配置文件.mp4 ├── [ 87M] 9-6Vue选项式API中如何使用TS.mp4 ├── [ 65M] 9-7Vue选项式API中组件通信使用TS.mp4 ├── [ 41M] 9-8Vue组合式API中如何使用TS.mp4 └── [ 51M] 9-9Vue组合式API中组件通信使用TS.mp4 ├──第10章Vue+TS项目：初始化工程与整体架构/ │ ├── [ 27M] 10-1章节介绍.mp4 │ ├── [ 55M] 10-2后端接口文档说明及在线数据访问.mp4 │ ├── [ 53M] 10-3本地接口启动及数据访问.mp4 │ ├── [ 73M] 10-4脚手架安装及第三方模块安装与配置.mp4 │ ├── [116M] 10-5架构项目路由系统及对应页面.mp4 │ ├── [134M] 10-6对axios进行二次封装处理.mp4 │ └── [7.6M] 10-8章节总结.mp4 ├──第11章Vue+TS项目：登录页与首页实现/ │ ├── [ 87M] 11-10完成头部交互与动态面包屑.mp4 │ ├── [3.5M] 11-11章节总结.mp4 │ ├── [5.5M] 11-1章节介绍.mp4 │ ├── [144M] 11-2搭建登录界面及iconfont图标使用.mp4 │ ├── [ 86M] 11-3收集登录数据及表单验证功能.mp4 │ ├── [ 82M] 11-4完成登录功能及token持久化存储.mp4 │ ├── [ 66M] 11-5添加路由权限及登录拦截.mp4 │ ├── [118M] 11-6请求头发送token和获取用户信息.mp4 │ ├── [ 45M] 11-8拆分首页导航组件和主体区域组件.mp4 │ └── [178M] 11-9完成动态权限菜单及路由跳转.mp4 ├──第12章Vue+TS项目：打卡签到页与异常考勤页实现/ │ ├── [6.1M] 12-1章节介绍.mp4 │ ├── [ 95M] 12-3月份控件联动描述列表和日历.mp4 │ ├── [111M] 12-4状态管理用户打卡信息.mp4 │ ├── [135M] 12-5日历数据渲染与在线打卡签到.mp4 │ ├── [101M] 12-6描述列表数据渲染与签到联动.mp4 │ ├── [ 91M] 12-7异常考勤页时间线布局.mp4 │ ├── [ 54M] 12-8打卡签到联动异常考勤.mp4 │ └── [124M] 12-9时间线数据渲染与交互功能实现.mp4 └──第13章Vue+TS项目：添加审批页与我的审批页实现/ ├── [ 89M] 13-10更新消息提醒与消除消息提醒.mp4 ├── [4.3M] 13-11章节总结.mp4 ├── [ 96M] 13-12项目优化-添加403404500页面.mp4 ├── [6.1M] 13-1章节介绍.mp4 ├── [130M] 13-2添加审批页功能栏与数据表格布局.mp4 ├── [124M] 13-3分页处理与筛选功能实现.mp4 ├── [172M] 13-4弹出框布局与初始数据渲染.mp4 ├── [159M] 13-5弹出框数据收集与添加审批.mp4 ├── [116M] 13-6联动异常考勤页及数据处理.mp4 ├── [100M] 13-7我的审批页功能栏与数据表格布局.mp4 └── [ 98M] 13-8我的审批页功能实现与更新审批信息.mp4 ├── 第14章React18核心概念与类组件使用-入门React18第/ │ ├── [ 73M] 14-10state细节详解及React18的自动批处理.mp4 │ ├── [ 80M] 14-11PureComponent与shouldCompone.mp4 │ ├── [ 66M] 14-12immutable.js不可变数据集合.mp4 │ ├── [ 52M] 14-13Refs操作DOM及操作类组件.mp4 │ ├── [ 75M] 14-14详解受控组件及各种表单中的使用.mp4 │ ├── [ 40M] 14-15详解非受控组件的实现方案.mp4 │ ├── [ 67M] 14-16详解常见生命周期钩子函数.mp4 │ ├── [ 84M] 14-17详解不常见生命周期钩子函数.mp4 │ ├── [ 26M] 14-18组件内容的组合模式.mp4 │ ├── [ 34M] 14-19复用组件功能之RenderProps模式.mp4 │ ├── [ 11M] 14-1章节介绍.mp4 │ ├── [ 32M] 14-20复用组件功能之HOC高阶组件模式.mp4 │ ├── [ 32M] 14-21组件跨层级通信方案Context.mp4 │ ├── [113M] 14-22简易购物车的综合案例.mp4 │ ├── [9.6M] 14-23章节总结.mp4 │ ├── [ 75M] 14-2虚拟DOM与React18新的渲染写法.mp4 │ ├── [105M] 14-3什么是JSX及JSX详细使用方式（一）.mp4 │ ├── [ 60M] 14-4什么是JSX及JSX详细使用方式（二）.mp4 │ ├── [ 74M] 14-5如何进行条件渲染与列表渲染.mp4 │ ├── [ 50M] 14-6类组件基本使用及组件通信.mp4 │ ├── [ 88M] 14-7props细节详解及注意事项.mp4 │ ├── [ 46M] 14-8类组件中事件的使用详解.mp4 │ └── [ 35M] 14-9类组件响应式视图实现与原理.mp4 ├── 第15章React18之Hook与函数组件-优雅简易的开发模式/ │ ├── [ 61M] 15-10React18之并发模式与startTransitio.mp4 │ ├── [ 35M] 15-11React18之useTransition与useDe.mp4 │ ├── [ 30M] 15-12函数组件功能复用之自定义Hook.mp4 │ ├── [ 87M] 15-13简易购物车的Hook版本.mp4 │ ├── [5.0M] 15-14章节总结.mp4 │ ├── [6.5M] 15-1章节介绍.mp4 │ ├── [ 44M] 15-2函数组件基本使用及点标记组件写法.mp4 │ ├── [106M] 15-3Hook概念及Hook之useState函数.mp4 │ ├── [ 97M] 15-4详解Hook之useEffect函数.mp4 │ ├── [ 82M] 15-5详解Hook之useRef函数.mp4 │ ├── [ 30M] 15-6详解Hook之useContext函数.mp4 │ ├── [ 50M] 15-7函数组件性能优化之React.memo.mp4 │ ├── [ 42M] 15-8详解Hook之useCallback与useMemo函数.mp4 │ └── [ 55M] 15-9详解Hook之useReducer函数.mp4 ├── 第16章React18扩展内容与脚手架使用-全面掌握React1/ … 其余 99 项略，目录共 299 项
