从零复刻大厂组件库：Vue3.3 + TS4 实战开发指南
前端开发进阶的必经之路是理解组件化开发的底层逻辑，而亲手构建一套组件库是检验架构能力的最佳试金石。本课程聚焦于“如何自主打造媲美 ElementPlus 的组件库”，解决的是开发者在工作中遇到的技术瓶颈：面对业务复杂度提升，如何通过封装高复用组件来提升开发效率。课程不满足于简单的 API 封装，而是深入到大厂组件库的研发流程，通过 Vue3.3 的组合式 API、TypeScript 4 的强类型约束以及最新的构建工具链，带你从零设计并开发十多个经典 UI 组件。这不仅是代码量的堆砌，更是对代码设计能力和工程化思维的深度打磨。通过这套完整的研发流程，你将学会如何处理组件间的状态管理、如何设计清晰的 Props 接口以及如何编写高内聚低耦合的代码，这些经验对于应对复杂的职场技术挑战至关重要。
适合人群与基础要求
本课程适合已有 Vue 基础，希望突破常规 CRUD 开发，向高级前端工程师转型的开发者。对于零基础转行者，建议先掌握 HTML/CSS/JS 以及 Vue3 的基础语法后再入手。课程难度中等偏上，要求学习者具备一定的 TypeScript 概念，因为课程将全程使用 TS4 进行类型推导和组件定义。如果你已经厌倦了在业务代码中反复修改样式和逻辑，渴望掌握一套可扩展、易维护的组件封装方法论，这门课能帮你补齐这块短板。在开始学习之前，建议先熟悉 Vue3 的 Setup 语法糖和 TS 基础泛型概念，这将帮助你更顺畅地跟上课程的节奏，避免在基础语法上浪费过多时间。
核心内容与实战应用
课程内容紧扣实战，不谈空泛的理论。你将跟随讲师的节奏，从组件库的目录结构设计开始，逐步实现包括表格、表单、弹窗在内的核心组件。重点在于掌握组件的 Props 设计、事件封装、插槽使用以及与 TS 类型的深度结合。学完这门课，你将具备独立封装业务组件的能力，不仅能独立开发出功能完备的 UI 库，还能将其应用到实际项目中，显著降低团队的开发成本。建议配合资料包中的源码进行对比学习，重点研究组件的 TypeScript 类型定义和样式封装逻辑，通过模仿和复刻，将大厂的开发思维内化为自己的技能。最终，你将产出一份可直接部署的组件库源码，作为简历上极具含金量的技术成果展示。
课程目录
1. 最新：最新Vue3.3及相关技术.mp4 4. 规范：大厂开发模式/代码规范.mp4 2. 最全：10+典型组件开发方法.mp4 5. 思维：提升大型项目架构思维.mp4 3. 深度：高难度组件设计思想.mp4 6. 全流程：测试，文档生产，打包.mp4 ├── 1-课程介绍/@更多it资源关注www. │ ├── [ 14M] 1-1 课程导学 │ └── [ 20M] 1-2 代码库使用注意事项 ├── 2-Typescript 基础知识/ │ ├── [ 24M] 2-1 什么是 Typescript 为什么要学习它 │ ├── [ 13M] 2-2 安装 Typescript │ ├── [ 13M] 2-3 原始数据类型和 Any 类型 │ ├── [ 15M] 2-4 数组和元组 │ ├── [8.8M] 2-5 Interface- 接口 初探 │ ├── [ 17M] 2-6 函数 │ ├── [ 18M] 2-7 类型推论 联合类型和 类型断言 │ ├── [ 18M] 2-8 枚举（Enum） │ ├── [ 18M] 2-9 泛型（Generics） 第一部分 │ ├── [ 17M] 2- 10 泛型（Generics） 第二部分 – 约束泛型 │ ├── [ 26M] 2- 11 泛型第三部分 – 泛型在类和接口中的使用 │ ├── [ 17M] 2- 12 类型别名，字面量 和 交叉类型 │ ├── [ 40M] 2- 13 声明文件 第一部分 │ ├── [ 27M] 2- 14 声明文件 第二部分 │ ├── [ 25M] 2- 15 内置类型 │ └── [ 27M] 2- 16 配置文件 ├── 3- Vue3.0 结合 Typescript 基础知识全面补强/ │ ├── [5.3M] 3-1 Vue3 学习导学 │ ├── [ 29M] 3-2 使用 vite 创建项目 │ ├── [ 46M] 3-3 文件结构以及推荐插件 │ ├── [ 40M] 3-4 ESLint 简介和初步使用 │ ├── [ 55M] 3-5 ESLint 配合 Vite 设置更多规则 │ ├── [ 36M] 3-6 响应式基础 – Ref 和 Reactive │ ├── [ 27M] 3-7 computed 计算属性 │ ├── [ 58M] 3-8 watch 监听器 │ ├── [ 47M] 3-9 生命周期和模版引用 │ ├── [ 48M] 3- 10 组件基础-属性 │ ├── [ 27M] 3- 11 组件自定义事件 │ ├── [ 40M] 3- 12 组合式函数 │ ├── [ 61M] 3- 13 创建 useURLLoader │ ├── [ 30M] 3- 14 useURLLoader 第二部分 │ ├── [ 29M] 3- 15 setup语法第一部分 │ ├── [ 33M] 3- 16 setup 语法第二部分 │ ├── [ 41M] 3- 17 依赖注入第一部分 │ ├── [ 28M] 3- 18 依赖注入第二部分 │ └── [ 43M] 3-19 Vue3.3更新简介 ├── 4-万事开头难 – Button 组件/ │ ├── [ 19M] 4-1 Button 组件架构设计以及需求分析 │ ├── [ 20M] 4-2 初始化项目以及项目文件结构 │ ├── [ 52M] 4-3 Button 组件编码第一部分 │ ├── [ 34M] 4-4 安装使用 Vue Macros │ ├── [ 51M] 4-5 Button编码第二部分 │ ├── [ 37M] 4-6 选取 CSS 解决方案，现代样式解决方案一览 │ ├── [ 41M] 4-7 色彩系统：当一次设计师 │ ├── [ 44M] 4-8 添加色彩变量 │ ├── [ 34M] 4-9 添加CSS Reset │ ├── [ 70M] 4- 10 为 Button 添加样式 │ ├── [ 76M] 4- 11 使用 PostCSS 生成对应的CSS 颜色变量 │ └── [ 21M] 4- 12 Button 章节总结 ├── 5-更近一步 Collapse 组件/ │ ├── [ 34M] 5-1 Collapse 组件架构设计以及需求分析 │ ├── [ 43M] 5-2 Collapse 编码第一部分 基础编码 │ ├── [ 43M] 5-3 Collapse 编码第二部分 – 使用 Context 完成父子属性传递 │ ├── [ 51M] 5-4 Collapse 编码第三部分支持 v-model │ ├── [ 55M] 5-5 Collapse 添加样式以及原生 Transition 组件 │ ├── [ 31M] 5-6 Collapse 添加下拉动画 – 动态计算高度（难点） │ ├── [ 23M] 5-7 Collapse 添加动画第二部分 – 尽善尽美 │ └── [ 13M] 5-8 Collapse 组件总结 ├── 6-它山之石 – Icon 组件/ │ ├── [ 39M] 6-1 图标库发展历程简介以及 Fontawesome 的安装使用 │ ├── [ 45M] 6-2 Icon 组件编码第一部分 – 基本实现 │ ├── [ 38M] 6-3 Icon 组件编码第一部分 – 完善功能以及样式添加 │ ├── [ 51M] 6-4 看看怎么样 – 为 Button 以及 Collapse 添加图标 │ └── [ 26M] 6-5 Icon组件总结 ├── 7-组件测试/ │ ├── [ 19M] 7-1 为什么要有测试 │ ├── [ 31M] 7-2 简介 Vitest 以及使用 │ ├── [ 63M] 7-3 学习回调测试以及模拟第三方库实现 │ ├── [ 24M] 7-4 安装 vue-test-utils 并且使用 │ ├── [ 33M] 7-5 Button 测试用例第二部分 │ ├── [ 38M] 7-6 Button 测试第三部分：学习使用 stub │ ├── [ 31M] 7-7 学习 VNode 定义以及 Render Function │ ├── [ 31M] 7-8 使用 Render Function 写组件以及了解JSX │ ├── [ 60M] 7-9 为 Collapse 添加测试用例 │ ├── [ 26M] 7- 10 测试Collapse 事件的第一种方式 │ ├── [ 45M] 7- 11 添加 Collapse 组件的事件测试 第二部分 │ ├── [ 52M] 7- 12 整理测试用例 │ └── [ 19M] 7- 13 测试总结 ├── 8-通用组件 -Tooltip 组件/ │ ├── 【更多it资源关注www.】Vue3.3 + TS4 │ ├── [ 16M] 8-1 Tooltip 组件需求分析 │ ├── [ 47M] 8-2 安装并试用 Popper.js │ ├── [ 51M] 8-3 Tooltip 编码第一部分 – 实现基本功能 │ ├── [ 55M] 8-4 Tooltip 编码第二部分 – 支持动态事件 │ ├── [ 30M] 8-5 Tooltip编码第三部分 – 实现外侧点击关闭 │ ├── [ 41M] 8-6 Tooltip 编码第四部分 – 实现手动打开关闭 │ ├── [ 42M] 8-7 Tooltip 编码第五部分 – 添加 popper 参数以及动画效果 │ ├── [ 44M] 8-8 Tooltip 编码第六部分 – 实现延时显示隐藏功能 │ ├── [ 45M] 8-9 给 Tooltip 组件添加样式 │ ├── [ 61M] 8- 10 给 Tooltip 组件添加测试 │ └── [ 19M] 8- 11 Tooltip 组件总结 ├── 9-现学现卖 – Dropdown 组件/ │ ├── [ 13M] 9-1 Dropdown 需求分析 │ ├── [ 57M] 9-2 Dropdown 编码第一部分 │ ├── [ 26M] 9-3 Dropdown 编码第二部分 │ ├── [ 54M] 9-4 Dropdown 编码第三部分 │ ├── [ 75M] 9-5 Dropdown编码第四部分 │ └── [ 24M] 9-6 Dropdown 总结 ├── 10-高难度 – Message 组件（有难度）/ │ ├── [ 26M] 10-1 Message 组件需求分析 │ ├── [ 35M] 10-2 Message 组件编码第一部分 │ ├── [ 31M] 10-3 createMessage 第一部分编码 │ ├── [ 25M] 10-4 createMessage 编码第二部分 │ ├── [ 30M] 10-5 createMessage 编码第三部分 │ ├── [ 53M] 10-6 createMessage 编码第四部分 │ ├── [ 41M] 10-7 createMessage 编码第五部分 │ ├── [ 47M] 10-8 createMessage 编码第六部分 │ ├── [ 59M] 10-9 createMessage 编码第七部分 │ ├── [ 50M] 10- 10 createMessage 编码第八部分 │ ├── [ 58M] 10- 11 createMessage 编码第九部分 添加样式以及动画 │ ├── [ 70M] 10- 12 createMessage 编码第十部分 │ └── [ 33M] 10- 13 Message 组件总结 ├── 11-更好的展示方式 – 使用工具生成文档/ │ ├── [ 16M] 11-1 Vitepress 简介 │ ├── [ 46M] 11-2 VitePress 安装和初步使用 │ ├── [ 37M] 11-3 Vitepress 路由系统 │ ├── [ 18M] 11-4 Vitepress 支持组件写法 │ ├── [ 30M] 11-5 Vitepress 添加自定义样式 │ ├── [ 54M] 11-6 添加 demo-preview 插件 │ ├── [ 40M] 11-7 Vitepress 自定义主题颜色 │ ├── [ 21M] 11-8 Vitepress 为生产环境打包 │ └── [ 21M] 11-9 Vitepress 总结 ├── 12-进入表单的世界 – Input 组件/ │ ├── @ │ ├── [ 27M] 12-1 Input 需求分析 │ ├── [ 29M] 12-2 Input 编码第一部分搭建框架 │ ├── [ 32M] 12-3 Input 测试用例编写以及引出 TDD 的开发方式 │ ├── [ 52M] 12-4 Input 编码第二部分支持 v-model │ ├── [ 44M] 12-5 Input 编码第三部分 支持按钮清空当前文本 │ ├── [ 58M] 12-6 Input编码第四部分 支持 │ ├── [ 56M] 12-7 Input 编码第五部分 支持事件 │ ├── [ 44M] 12-8 Input 编码第六部分：组件添加原生属性 │ ├── [ 37M] 12-9 Input 组件界面测试以及改进 │ └── [ 10M] 12- 10 Input开发总结 ├── 13-狸猫换太子 – Switch 组件/ │ ├── [ 12M] 13-1 Switch组件需求分析 │ ├── [ 19M] 13-2 Switch 编码第一部分 │ ├── [ 35M] 13-3 Switch 编码第二部分 样式游戏 │ ├── [ 25M] 13-4 Switch 编码第三部分 │ ├── [ 32M] 13-5 Switch组件编码第四部分 │ └── [ 14M] 13-6 Switch 开发总结 ├── 14-魔高一丈- Select 组件（有难度）/ │ ├── [ 30M] 14-1 1 Select 需求分析 │ ├── [ 36M] 14-2 2 Select 编码第一部分 基本结构 │ ├── [ 42M] 14-3 3 Select 编码第二部分 选中选项功能 │ ├── [ 30M] 14-4 4 Select 编码第三部分 初步添加样式 │ ├── [ 40M] 14-5 5 Select 编码第四部分 添加箭头图标 添加外侧点击关闭 │ ├── [ 32M] 14-6 6 Select编码第五部分 支持清空 │ ├── [ 33M] 14-7 7 Select编码第六部分 支持自定义模版 │ ├── [ 46M] 14-8 8 Select 编码第七部分 支持筛选 │ ├── [ 35M] 14-9 9 Select 编码第八部分 完善筛选功能 │ ├── [ 55M] 14- 10 Select编码第九部分 支持远程搜索 │ ├── [ 42M] 14-11 11 Select 编码第十部分 远程请求添加防抖 │ ├── [ 36M] 14-12 12 Select 编码第十一部分 支持键盘操作 │ ├── [ 49M] 14-13 13 Select 编码第十二部分 完善键盘操作功能 │ └── [ 31M] 14-14 14 Select 总结 ├── 15-大一统- Form 组件（有难度）/ │ ├── [ 36M] 15-1 Form 需求分析 │ ├── [ 20M] 15-2 Form 编码第一部分 – 基础结构 │ ├── [ 39M] 15-3 Form 编码第二部分 – 添加数据和规则 │ ├── [ 36M] 15-4 Form 组件第三部分 – 获取数据和规则 │ ├── [ 47M] 15-5 Form编码第四部分 – 学习使用 async-validator │ ├── [ 45M] 15-6 Form 编码第五部分 – FormItem 完成验证 │ ├── [ 41M] 15-7 Form编码第六部分 – 自动触发验证 │ ├── [ 32M] 15-8 Form 编码第七部分 – 添加 trigger 条件 │ ├── [ 33M] 15-9 Form 组件第八部分 – 父子组件通信 │ ├── [ 57M] 15- 10 Form 编码第九部分 – 完成表单整个验证功能 │ ├── [ 55M] 15- 11 Form编码第十部分 – 添加重置状态功能 │ ├── [ 36M] 15- 12 Form编码第十一部分 – 添加样式 │ ├── [ 44M] 15- 13 Form 编码第十二部分 – 最终整合 │ └── [ 46M] 15- 14 Form 总结
