这门课解决什么痛点，适合谁学

前端职场现状很现实：基础 CRUD 岗位严重饱和，而能独立封装高质量业务组件、甚至动手造轮子的开发者依然稀缺。很多企业在使用 ElementPlus 等成熟组件库时，面临二次封装困难、样式隔离复杂、自定义主题受限等问题，根本原因在于开发者对组件底层逻辑理解不深。本课程正是针对这一能力缺口，带你从零开始自主打造一套媲美 ElementPlus 的组件库。它不是教你怎么调用 API，而是教你怎么实现 API。

适合有一定 Vue3 基础、熟悉 TypeScript 基本语法，但感到开发大型项目架构能力不足、组件复用效率低的同学。如果你经常陷入“组件写出来却难以维护”的困境，或者想从“业务熟练工”转型为“架构思考者”，这门课是极佳的补齐方案。要求读者能独立编写 Vue 单文件组件，并对响应式原理有基本认知。

建议先看哪几块，学完能做什么

课程涵盖十多个经典组件的开发，包含设计系统定义、基础原子组件到复杂业务组件的完整链路。建议先重点攻克按钮（Button）、输入框（Input）和图标（Icon）这类基础组件，它们涉及样式变量、Props 校验和事件分发，是理解整个库架构的基石。随后深入列表（List）、弹窗（Dialog）等依赖性强、状态管理复杂的组件，体会 TS 类型推导与 Vue 组合式 API 的结合技巧。最后学习主题定制与打包发布流程，完成从开发到部署的闭环。

学完后，你将能够独立设计并实现一套企业级组件库，具备清晰的架构思维，能够解决复杂场景下的样式隔离、状态管理和类型安全等问题。你不再只是组件的使用者，而是能够根据业务需求快速定制、优化甚至自研组件的开发者，显著提升在大厂技术面试中的竞争力。

资料怎么配合练习

课程配套资料包含完整的项目源码、TypeScript 类型定义文件以及构建配置脚本。建议学习者不要直接复制粘贴代码，而是先根据视频讲解自行搭建组件骨架，再对照源码查漏补缺。重点练习 TS4 中的高级类型技巧，如条件类型、映射类型在组件 Props 定义中的应用，这是提升代码健壮性的关键。同时，务必动手执行打包命令，观察 Rollup 或 Vite 构建产物，理解 Tree Shaking 原理及样式分离策略，确保你写的组件能被生产环境高效使用。

课程介绍

Vue3.3 + TS4 自主打造媲美 ElementPlus 的组件库视频教程，。在互联网就业形式越来越严峻的今天，无可否认，掌握复杂组件库研发是最佳选择，因为它涉及的技术难度和广度非常高。我们的课程将教你使用最新的技术栈Vue3.3+TS4，以及其他最新的相关技术。我们从零开始，带你完成了十多个经典组件的设计和开发，同时还会一对一地全面复刻大厂的组件库开发流程。通过这个课程，你将提升你的架构思维和代码设计能力，并进一步成为前端开发的高手。

课程目录

1. 最新：最新Vue3.3及相关技术
4. 规范：大厂开发模式/代码规范
2. 最全：10+典型组件开发方法
5. 思维：提升大型项目架构思维
3. 深度：高难度组件设计思想
6. 全流程：测试，文档生产，打包
├── 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 总结