# Vue3.3+TS4，自主打造媲美ElementPlus的组件库

*Published:* 2024-06-16
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2024年6月16日，已超过 180天没有更新



**高难度+最新技术栈，Vite + Vue3.3 + Vitest + Vitepress 打造大厂敲门砖项目！**

[![](https://www.xarjtc.com/wp-content/uploads/2024/06/6e2937f97bddd33.webp)](https://www.xarjtc.com/wp-content/uploads/2024/06/6e2937f97bddd33.webp)

**你将学到：**

1\. 最新：最新Vue3.3及相关技术

4\. 规范：大厂开发模式/代码规范

2\. 最全：10+典型组件开发方法

5\. 思维：提升大型项目架构思维

3\. 深度：高难度组件设计思想

6\. 全流程：测试，文档生产，打包

**简介：**

在互联网就业形式越来越严峻的今天，掌握一项具有强竞争力的技能尤其重要。复杂组件库研发因其涉及的技术难度和广度无疑成为最好的选择。本课程带你使用最新技术栈Vue3.3 + TS4 以及周边最新技术，从0到1完成10+经典组件的设计与开发，1:1 全体系复刻大厂组件库开发全流程，提升架构思维和代码设计能力，进阶成为前端开发高手。

**适合人群**

软件开发人员

互联网从业者

前端开发工程师

**技术储备**

熟悉 HTML CSS JS（必须）

了解 Vue3 技术栈（必须）

**环境参数**

Vue 3.3 3.3

Typescript 4.7

Vite 4.0.0

Vitepress 1.0.0

Vitest 0.29.2

Vue-test-utils 2.3.0

**章节目录：**

第1章 课程介绍

3 节｜11分钟

收起

视频：

1-1 课程导学

试看

06:26

视频：

1-2 代码库使用注意事项

试看

04:24

图文：

1-3 项目演示地址：http://element.vikingship.xyz/

第2章 Typescript 基础知识

16 节｜135分钟

收起

视频：

2-1 什么是 Typescript 为什么要学习它

09:52

视频：

2-2 安装 Typescript

06:06

视频：

2-3 原始数据类型和 Any 类型

06:07

视频：

2-4 数组和元组

06:55

视频：

2-5 Interface- 接口 初探

05:40

视频：

2-6 函数

07:37

视频：

2-7 类型推论 联合类型和 类型断言

07:48

视频：

2-8 枚举（Enum）

07:41

视频：

2-9 泛型（Generics） 第一部分

07:46

视频：

2-10 泛型（Generics） 第二部分 - 约束泛型

07:06

视频：

2-11 泛型第三部分 - 泛型在类和接口中的使用

11:16

视频：

2-12 类型别名，字面量 和 交叉类型

07:11

视频：

2-13 声明文件 第一部分

13:34

视频：

2-14 声明文件 第二部分

10:43

视频：

2-15 内置类型

08:36

视频：

2-16 配置文件

10:43

第3章 Vue3.0 结合 Typescript 基础知识全面补强

19 节｜204分钟

收起

视频：

3-1 Vue3 学习导学

02:48

视频：

3-2 使用 vite 创建项目

07:43

视频：

3-3 文件结构以及推荐插件

13:04

视频：

3-4 ESLint 简介和初步使用

11:12

视频：

3-5 ESLint 配合 Vite 设置更多规则

12:45

视频：

3-6 响应式基础 - Ref 和 Reactive

13:08

视频：

3-7 computed 计算属性

08:30

视频：

3-8 watch 监听器

13:41

视频：

3-9 生命周期和模版引用

11:40

视频：

3-10 组件基础-属性

15:02

视频：

3-11 组件自定义事件

08:57

视频：

3-12 组合式函数

10:52

视频：

3-13 创建 useURLLoader

14:41

视频：

3-14 useURLLoader 第二部分

08:52

视频：

3-15 setup语法第一部分

05:40

视频：

3-16 setup 语法第二部分

10:15

视频：

3-17 依赖注入第一部分

11:17

视频：

3-18 依赖注入第二部分

11:18

视频：

3-19 Vue3.3更新简介

11:38

第4章 万事开头难 - Button 组件

12 节｜126分钟

收起

视频：

4-1 Button 组件架构设计以及需求分析

07:24

视频：

4-2 初始化项目以及项目文件结构

08:07

视频：

4-3 Button 组件编码第一部分

16:07

视频：

4-4 安装使用 Vue Macros

08:46

视频：

4-5 Button编码第二部分

12:18

视频：

4-6 选取 CSS 解决方案，现代样式解决方案一览

08:49

视频：

4-7 色彩系统：当一次设计师

09:27

视频：

4-8 添加色彩变量

08:48

视频：

4-9 添加CSS Reset

09:42

视频：

4-10 为 Button 添加样式

13:39

视频：

4-11 使用 PostCSS 生成对应的CSS 颜色变量

16:03

视频：

4-12 Button 章节总结

06:11

第5章 更近一步 Collapse 组件

8 节｜78分钟

收起

视频：

5-1 Collapse 组件架构设计以及需求分析

09:00

视频：

5-2 Collapse 编码第一部分 基础编码

11:55

视频：

5-3 Collapse 编码第二部分 - 使用 Context 完成父子属性传递

13:13

视频：

5-4 Collapse 编码第三部分支持 v-model

12:07

视频：

5-5 Collapse 添加样式以及原生 Transition 组件

11:42

视频：

5-6 Collapse 添加下拉动画 - 动态计算高度（难点）

07:52

视频：

5-7 Collapse 添加动画第二部分 - 尽善尽美

06:15

视频：

5-8 Collapse 组件总结

05:01

第6章 它山之石 - Icon 组件

5 节｜53分钟

收起

视频：

6-1 图标库发展历程简介以及 Fontawesome 的安装使用

11:35

视频：

6-2 Icon 组件编码第一部分 - 基本实现

10:02

视频：

6-3 Icon 组件编码第一部分 - 完善功能以及样式添加

12:07

视频：

6-4 看看怎么样 - 为 Button 以及 Collapse 添加图标

11:31

视频：

6-5 Icon组件总结

07:19

第7章 组件测试

13 节｜133分钟

收起

视频：

7-1 为什么要有测试

08:07

视频：

7-2 简介 Vitest 以及使用

13:14

视频：

7-3 学习回调测试以及模拟第三方库实现

14:36

视频：

7-4 安装 vue-test-utils 并且使用

08:50

视频：

7-5 Button 测试用例第二部分

09:54

视频：

7-6 Button 测试第三部分：学习使用 stub

10:33

视频：

7-7 学习 VNode 定义以及 Render Function

09:59

视频：

7-8 使用 Render Function 写组件以及了解JSX

12:02

视频：

7-9 为 Collapse 添加测试用例

12:48

视频：

7-10 测试Collapse 事件的第一种方式

05:32

视频：

7-11 添加 Collapse 组件的事件测试 第二部分

09:39

视频：

7-12 整理测试用例

10:17

视频：

7-13 测试总结

07:09

第8章 通用组件 -Tooltip 组件

11 节｜113分钟

收起

视频：

8-1 Tooltip 组件需求分析

05:49

视频：

8-2 安装并试用 Popper.js

10:48

视频：

8-3 Tooltip 编码第一部分 - 实现基本功能

14:34

视频：

8-4 Tooltip 编码第二部分 - 支持动态事件

12:23

视频：

8-5 Tooltip编码第三部分 - 实现外侧点击关闭

10:41

视频：

8-6 Tooltip 编码第四部分 - 实现手动打开关闭

09:25

视频：

8-7 Tooltip 编码第五部分 - 添加 popper 参数以及动画效果

09:10

视频：

8-8 Tooltip 编码第六部分 - 实现延时显示隐藏功能

11:02

视频：

8-9 给 Tooltip 组件添加样式

10:16

视频：

8-10 给 Tooltip 组件添加测试

12:31

视频：

8-11 Tooltip 组件总结

06:13

第9章 现学现卖 - Dropdown 组件

6 节｜66分钟

收起

视频：

9-1 Dropdown 需求分析

05:16

视频：

9-2 Dropdown 编码第一部分

15:17

视频：

9-3 Dropdown 编码第二部分

07:26

视频：

9-4 Dropdown 编码第三部分

14:39

视频：

9-5 Dropdown编码第四部分

14:59

视频：

9-6 Dropdown 总结

07:40

第10章 高难度 - Message 组件（有难度）

13 节｜141分钟

收起

视频：

10-1 Message 组件需求分析

06:31

视频：

10-2 Message 组件编码第一部分

11:45

视频：

10-3 createMessage 第一部分编码

10:31

视频：

10-4 createMessage 编码第二部分

07:19

视频：

10-5 createMessage 编码第三部分

08:14

视频：

10-6 createMessage 编码第四部分

12:49

视频：

10-7 createMessage 编码第五部分

10:18

视频：

10-8 createMessage 编码第六部分

10:22

视频：

10-9 createMessage 编码第七部分

13:56

视频：

10-10 createMessage 编码第八部分

13:32

视频：

10-11 createMessage 编码第九部分 添加样式以及动画

12:11

视频：

10-12 createMessage 编码第十部分

14:36

视频：

10-13 Message 组件总结

08:10

第11章 更好的展示方式 - 使用工具生成文档

9 节｜78分钟

收起

视频：

11-1 Vitepress 简介

05:15

视频：

11-2 VitePress 安装和初步使用

11:19

视频：

11-3 Vitepress 路由系统

10:11

视频：

11-4 Vitepress 支持组件写法

07:17

视频：

11-5 Vitepress 添加自定义样式

08:45

视频：

11-6 添加 demo-preview 插件

13:21

视频：

11-7 Vitepress 自定义主题颜色

09:09

视频：

11-8 Vitepress 为生产环境打包

05:59

视频：

11-9 Vitepress 总结

06:18

第12章 进入表单的世界 - Input 组件

10 节｜108分钟

收起

视频：

12-1 Input 需求分析

09:49

视频：

12-2 Input 编码第一部分搭建框架

10:55

视频：

12-3 Input 测试用例编写以及引出 TDD 的开发方式

10:35

视频：

12-4 Input 编码第二部分支持 v-model

13:30

视频：

12-5 Input 编码第三部分 支持按钮清空当前文本

12:25

视频：

12-6 Input编码第四部分 支持密码切换

13:21

视频：

12-7 Input 编码第五部分 支持事件

12:06

视频：

12-8 Input 编码第六部分：组件添加原生属性

09:12

视频：

12-9 Input 组件界面测试以及改进

11:31

视频：

12-10 Input开发总结

03:50

第13章 狸猫换太子 - Switch 组件

6 节｜53分钟

收起

视频：

13-1 Switch组件需求分析

05:10

视频：

13-2 Switch 编码第一部分

08:14

视频：

13-3 Switch 编码第二部分 样式游戏

12:30

视频：

13-4 Switch 编码第三部分

11:02

视频：

13-5 Switch组件编码第四部分

11:05

视频：

13-6 Switch 开发总结

04:16

第14章 魔高一丈- Select 组件（有难度）

14 节｜151分钟

收起

视频：

14-1 1 Select 需求分析

08:05

视频：

14-2 2 Select 编码第一部分 基本结构

12:17

视频：

14-3 3 Select 编码第二部分 选中选项功能

11:24

视频：

14-4 4 Select 编码第三部分 初步添加样式

11:22

视频：

14-5 5 Select 编码第四部分 添加箭头图标 添加外侧点击关闭

12:33

视频：

14-6 6 Select编码第五部分 支持清空

10:41

视频：

14-7 7 Select编码第六部分 支持自定义模版

08:37

视频：

14-8 8 Select 编码第七部分 支持筛选

11:39

视频：

14-9 9 Select 编码第八部分 完善筛选功能

10:13

视频：

14-10 Select编码第九部分 支持远程搜索

13:07

视频：

14-11 11 Select 编码第十部分 远程请求添加防抖

09:00

视频：

14-12 12 Select 编码第十一部分 支持键盘操作

09:17

视频：

14-13 13 Select 编码第十二部分 完善键盘操作功能

13:09

视频：

14-14 14 Select 总结

08:47

第15章 大一统- Form 组件（有难度）

14 节｜156分钟

收起

视频：

15-1 Form 需求分析

10:32

视频：

15-2 Form 编码第一部分 - 基础结构

08:17

视频：

15-3 Form 编码第二部分 - 添加数据和规则

12:01

视频：

15-4 Form 组件第三部分 - 获取数据和规则

11:47

视频：

15-5 Form编码第四部分 - 学习使用 async-validator

11:34

视频：

15-6 Form 编码第五部分 - FormItem 完成验证

12:12

视频：

15-7 Form编码第六部分 - 自动触发验证

10:25

视频：

15-8 Form 编码第七部分 - 添加 trigger 条件

08:09

视频：

15-9 Form 组件第八部分 - 父子组件通信

10:12

视频：

15-10 Form 编码第九部分 - 完成表单整个验证功能

14:51

视频：

15-11 Form编码第十部分 - 添加重置状态功能

12:37

视频：

15-12 Form编码第十一部分 - 添加样式

12:05

视频：

15-13 Form 编码第十二部分 - 最终整合

10:33

视频：

15-14 Form 总结

10:30

第16章 组件库打包以及发布

18 节｜154分钟

收起

视频：

16-1 导学

05:20

视频：

16-2 Javascript 模块化历史

09:37

视频：

16-3 Bundler打包工具 简介

08:28

视频：

16-4 Vite 的工作原理

11:11

视频：

16-5 明确打包什么类型的模块

07:59

视频：

16-6 了解 Vue3 的插件系统

10:08

视频：

16-7 创建组件的入口文件

08:32

视频：

16-8 简介 Rollup 的配置文件以及插件系统

08:29

视频：

16-9 打包组件库第一部分 - 小试牛刀

07:28

视频：

16-10 打包组件库第二部分 - 配置 rollup

08:05

视频：

16-11 组件库打包第三部分 - 生成类型定义文件

08:39

视频：

16-12 组件库打包第四部分- 生成样式文件

07:18

视频：

16-13 组件库打包第五部分 - 拆分构建脚本

09:16

视频：

16-14 npm link 测试打包内容

09:10

视频：

16-15 最终修正打包信息

09:20

视频：

16-16 npm简介

09:37

视频：

16-17 发布到 npm

08:11

视频：

16-18 打包发布总结

06:33