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

前端开发

课程简介

Vue3.3 + TS4 组件库开发实践本课程聚焦于 Vue3.3 与 TypeScript4 的结合，带领开发者从零构建一个功能完备、结构清晰、可复用的组件库。课程内容涵盖组件设计、类型定义、样式封装、测试与发布等核心环节，帮助你理解如何将组件库从概念落地为可发布的产品。解决什么问题课程旨在解决开发者在组件库开发过程中遇到的常见问题，如组件复用性差…

已有 7 人浏览发布 2026-06-09 更新 2026-10-12

Vue3.3 + TS4 组件库开发实践

本课程聚焦于 Vue3.3 与 TypeScript4 的结合，带领开发者从零构建一个功能完备、结构清晰、可复用的组件库。课程内容涵盖组件设计、类型定义、样式封装、测试与发布等核心环节，帮助你理解如何将组件库从概念落地为可发布的产品。

解决什么问题

课程旨在解决开发者在组件库开发过程中遇到的常见问题，如组件复用性差、类型定义不规范、样式隔离困难、测试覆盖率不足等。通过实战讲解，结合 Vue3 的组合式 API 和 TypeScript4 的类型系统，你将掌握如何高效构建可维护、可拓展的组件库。特别是针对 ElementPlus 等主流组件库的结构与功能，提供对比分析和优化思路。

适合什么基础

该课程适合已经掌握 Vue2 或 Vue3 基础知识，并对 TypeScript 有一定了解的开发者。如果你熟悉组件化开发，了解 Vue 的响应式系统和 TypeScript 的类型声明方式，那么本课程将帮助你进一步提升组件库开发能力。对于初学者，建议先学习 Vue3 的基础组件开发和 TypeScript 的类型系统，再进入本课程。

课程内容建议优先学习组件需求分析、类型定义与封装、样式模块化等部分，这些是构建高质量组件库的关键。后续可逐步深入组件测试、打包发布、文档编写等环节，形成完整的开发闭环。

学完能独立做什么

完成课程后，你将具备独立开发组件库的能力，能够设计、实现并发布一个具备完整功能、良好结构和可复用性的组件库。包括但不限于：编写组件接口、定义类型、封装样式、编写单元测试和集成测试，以及使用 Vite 或 Webpack 进行打包发布。这些能力可以帮助你在项目中快速构建可复用的 UI 模块，提高开发效率。

资料包中的代码与讲解相互对应，建议边看边写，对照练习，确保理解每个模块的设计逻辑与实现方式。通过反复修改与优化，你将形成自己的组件库开发方法论，为后续项目提供可复用的组件基础。

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

Vue3.3+TS4组件库打造指南

编辑点评

深入浅出Vue3.3与TypeScript4，从组件需求分析到打包发布，全面掌握组件库构建技巧。

⭐ 编辑推荐

系统学习Vue3.3和TypeScript4，打造媲美ElementPlus的组件库。

✨ 课程亮点

✦Vue3.3+TS4实战教程

✦组件库构建全流程

✦从需求分析到发布

课程目录

8-通用组件 -Tooltip 组件11 集

8-2 安装并试用 Popper.js【优质资源‖关注：cunWorkNotes 解锁】.mp4 [75.8 MB]
8-1 Tooltip 组件需求分析【整理不易‖记得关注：CunWorKNotes】.mp4 [29.1 MB]
8-10 给 Tooltip 组件添加测试【不易整理‖请关注：CunWorkNoteS】.mp4 [104.7 MB]
8-4 Tooltip 编码第二部分 - 支持动态事件.mp4 [97.8 MB]
8-9 给 Tooltip 组件添加样式.mp4 [87.3 MB]
8-7 Tooltip 编码第五部分 - 添加 popper 参数以及动画效果【整理不易‖记得关注：CunWorKNotes】.mp4 [72.6 MB]
8-11 Tooltip 组件总结【持续更新‖免费提供：CunworknoteS】.mp4 [36.0 MB]
8-3 Tooltip 编码第一部分 - 实现基本功能.mp4 [86.9 MB]
8-6 Tooltip 编码第四部分 - 实现手动打开关闭.mp4 [70.0 MB]
8-5 Tooltip编码第三部分 - 实现外侧点击关闭.mp4 [49.9 MB]
8-8 Tooltip 编码第六部分 - 实现延时显示隐藏功能【资源精选‖更多关注：CunworkNotes】.mp4 [78.1 MB]

2-Typescript 基础知识13 集

2-10 泛型（Generics）第二部分 - 约束泛型.mp4 [16.6 MB]
2-4 数组和元组【持续更新‖免费提供：CunworknoteS】.mp4 [15.1 MB]
2-14 声明文件第二部分.mp4 [27.2 MB]
2-13 声明文件第一部分.mp4 [39.7 MB]
2-15 内置类型【资源精选‖更多关注：CunworkNotes】.mp4 [25.2 MB]
2-16 配置文件.mp4 [27.4 MB]
2-7 类型推论联合类型和类型断言【优质资源‖关注：cunWorkNotes 解锁】.mp4 [18.1 MB]
2-12 类型别名，字面量和交叉类型.mp4 [16.6 MB]
2-2 安装 Typescript【优质资源‖关注：cunWorkNotes 解锁】.mp4 [13.5 MB]
2-3 原始数据类型和 Any 类型.mp4 [13.3 MB]
2-1 什么是 Typescript 为什么要学习它【更多精选‖公众号：CunWorknotes】 .mp4 [24.1 MB]
2-9 泛型（Generics）第一部分.mp4 [18.3 MB]
2-11 泛型第三部分 - 泛型在类和接口中的使用.mp4 [26.2 MB]

电子书18 条

Vite 创建项目【优质资源‖关注：cunWorkNotes 解锁】.pdf [612.2 KB]
css【更多精选‖公众号：CunWorknotes】 .pdf [1.6 MB]
组件分析以及编码【更多精选‖公众号：CunWorknotes】 .pdf [1.2 MB]
Icon 组件.pdf [703.0 KB]
响应式基础.pdf [977.0 KB]
使用 Eslint【更多精选‖公众号：CunWorknotes】 .pdf [1.2 MB]
组件总结.pdf [483.1 KB]
基础知识.pdf [2.9 MB]
组件基础.pdf [705.0 KB]
为什么要有测试.pdf [437.8 KB]
将组件 Render 到 DOM 节点上.pdf [506.7 KB]
Vue3.3 升级内容.pdf [759.3 KB]
Button 分析及编码.pdf [879.4 KB]
本章简介.pdf [455.3 KB]
Vitest.pdf [573.3 KB]
Bundler+是什么？.pdf [1.2 MB]
本章导学.pdf [303.3 KB]
Vnode.pdf [936.8 KB]

7-组件测试13 集

7-4 安装 vue-test-utils 并且使用.mp4 [46.0 MB]
7-9 为 Collapse 添加测试用例.mp4 [108.6 MB]
7-6 Button 测试第三部分：学习使用 stub【不易整理‖请关注：CunWorkNoteS】.mp4 [69.7 MB]
7-2 简介 Vitest 以及使用.mp4 [54.5 MB]
7-12 整理测试用例.mp4 [92.0 MB]
7-11 添加 Collapse 组件的事件测试第二部分.mp4 [75.7 MB]
7-1 为什么要有测试.mp4 [25.1 MB]
7-10 测试Collapse 事件的第一种方式【优质资源‖关注：cunWorkNotes 解锁】.mp4 [41.7 MB]
7-5 Button 测试用例第二部分.mp4 [58.0 MB]
7-3 学习回调测试以及模拟第三方库实现【更多精选‖公众号：CunWorknotes】 .mp4 [96.3 MB]
7-13 娴嬭瘯鎬荤粨.mp4 [32.6 MB]
7-7 学习 VNode 定义以及 Render Function.mp4 [66.2 MB]
7-8 使用 Render Function 写组件以及了解JSX.mp4 [58.3 MB]

4-万事开头难 - Button 组件10 集

4-5 Button编码第二部分.mp4 [99.9 MB]
4-8 添加色彩变量.mp4 [78.9 MB]
4-4 安装使用 Vue Macros【公重号：CunWorkNotes】.mp4 [68.3 MB]
4-3 Button 组件编码第一部分.mp4 [106.8 MB]
4-6 选取 CSS 解决方案，现代样式解决方案一览【优质资源‖关注：cunWorkNotes 解锁】.mp4 [79.2 MB]
4-11 使用 PostCSS 生成对应的CSS 颜色变量【资源精选‖更多关注：CunworkNotes】.mp4 [147.1 MB]
4-7 色彩系统：当一次设计师.mp4 [85.1 MB]
4-1 Button 组件架构设计以及需求分析【不易整理‖请关注：CunWorkNoteS】.mp4 [38.6 MB]
4-12 Button 章节总结【优质资源‖关注：cunWorkNotes 解锁】.mp4 [41.5 MB]
4-2 初始化项目以及项目文件结构.mp4 [35.9 MB]

16-组件库的打包以及发布12 集

16-14【优质资源‖关注：cunWorkNotes 解锁】.mp4 [104.8 MB]
16-13【资源精选‖更多关注：CunworkNotes】.mp4 [128.0 MB]
16-6【整理不易‖记得关注：CunWorKNotes】.mp4 [140.2 MB]
16-9【资源精选‖更多关注：CunworkNotes】.mp4 [99.2 MB]
16-5 明确打包什么类型的模块【持续更新‖免费提供：CunworknoteS】.mp4 [87.4 MB]
16-4 Vite 的工作原理【资源精选‖更多关注：CunworkNotes】.mp4 [159.8 MB]
16-17【持续更新‖免费提供：CunworknoteS】.mp4 [154.9 MB]
16-8【资源精选‖更多关注：CunworkNotes】.mp4 [114.1 MB]
16-3 Bundler打包工具简介.mp4 [105.1 MB]
16-11【持续更新‖免费提供：CunworknoteS】.mp4 [116.1 MB]
16-1 导学.mp4 [48.7 MB]
16-2 Javascript 模块化历史.mp4 [116.6 MB]

3- Vue3.0 结合 Typescript 基础知识全面补强16 集

3-15 setup语法第一部分【持续更新‖免费提供：CunworknoteS】.mp4 [28.9 MB]
3-12 组合式函数【整理不易‖记得关注：CunWorKNotes】.mp4 [39.6 MB]
3-10 组件基础-属性.mp4 [48.2 MB]
3-11 组件自定义事件.mp4 [26.6 MB]
3-16 setup 语法第二部分【持续更新‖免费提供：CunworknoteS】.mp4 [33.0 MB]
3-6 响应式基础 - Ref 和 Reactive.mp4 [36.2 MB]
3-14 useURLLoader 第二部分【公重号：CunWorkNotes】.mp4 [30.2 MB]
3-1 Vue3 学习导学【整理不易‖记得关注：CunWorKNotes】.mp4 [5.3 MB]
3-4 ESLint 简介和初步使用【整理不易‖记得关注：CunWorKNotes】.mp4 [40.0 MB]
3-9 生命周期和模版引用【持续更新‖免费提供：CunworknoteS】.mp4 [46.7 MB]
3-5 ESLint 配合 Vite 设置更多规则【公重号：CunWorkNotes】.mp4 [54.5 MB]
3-17 依赖注入第一部分.mp4 [41.2 MB]
3-18 依赖注入第二部分.mp4 [27.9 MB]
3-2 使用 vite 创建项目.mp4 [29.3 MB]
3-19 Vue3.3更新简介【持续更新‖免费提供：CunworknoteS】.mp4 [43.2 MB]
3-3 文件结构以及推荐插件.mp4 [46.0 MB]

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

4【持续更新‖免费提供：CunworknoteS】.mp4 [280.9 MB]

1-课程介绍2 集

1-2 代码库使用注意事项.mp4 [19.8 MB]
1-1 课程导学.mp4 [14.1 MB]

12-进入表单的世界 - Input 组件1 集

5【资源精选‖更多关注：CunworkNotes】.mp4 [280.4 MB]

15-大一统- Form 组件（有难度）1 集

10【不易整理‖请关注：CunWorkNoteS】.mp4 [276.5 MB]

5-更近一步 Collapse 组件8 集

5-2 Collapse 编码第一部分基础编码.mp4 [79.1 MB]
5-8 Collapse 组件总结【不易整理‖请关注：CunWorkNoteS】.mp4 [21.4 MB]
5-7 Collapse 添加动画第二部分 - 尽善尽美.mp4 [41.5 MB]
5-4 Collapse 编码第三部分支持 v-model【资源精选‖更多关注：CunworkNotes】.mp4 [83.4 MB]
5-3 Collapse 编码第二部分 - 使用 Context 完成父子属性传递.mp4 [76.1 MB]
5-6 Collapse 添加下拉动画 - 动态计算高度（难点）.mp4 [61.9 MB]
5-5 Collapse 添加样式以及原生 Transition 组件【整理不易‖记得关注：CunWorKNotes】.mp4 [103.5 MB]
5-1 Collapse 组件架构设计以及需求分析.mp4 [60.7 MB]

6-它山之石 - Icon 组件5 集

6-4 看看怎么样 - 为 Button 以及 Collapse 添加图标.mp4 [88.2 MB]
6-3 Icon 组件编码第一部分 - 完善功能以及样式添加【更多精选‖公众号：CunWorknotes】 .mp4 [67.0 MB]
6-2 Icon 组件编码第一部分 - 基本实现【资源精选‖更多关注：CunworkNotes】.mp4 [80.7 MB]
6-1 图标库发展历程简介以及 Fontawesome 的安装使用.mp4 [75.9 MB]
6-5 Icon组件总结【不易整理‖请关注：CunWorkNoteS】.mp4 [48.9 MB]

资料代码3 条

v-element-master.exe [440.1 KB]
vue3-basic-master.exe [351.0 KB]
typescript-basic-master.exe [323.4 KB]

适合人群

Vue开发者
前端工程师
组件库爱好者

🎯 学习收获

掌握Vue3.3组件开发
精通TypeScript4使用
构建并发布个人组件库

🎉 祝您学习愉快！