mksz693-Vue3.3 + TS4 ,自主打造媲美 ElementPlus 的组件库
Vue3.3+TS4组件库打造指南
编辑点评
深入浅出Vue3.3与TypeScript4,从组件需求分析到打包发布,全面掌握组件库构建技巧。
⭐ 编辑推荐
系统学习Vue3.3和TypeScript4,打造媲美ElementPlus的组件库。
课程亮点
• Vue3.3+TS4实战教程
• 组件库构建全流程
• 从需求分析到发布
课程目录
📁 8-通用组件 -Tooltip 组件
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 基础知识
2-10 泛型(Generics) 第二部分 - 约束泛型.mp4 [16.6 MB]
2-6 函数.mp4 [17.1 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-8 枚举(Enum).mp4 [17.7 MB]
2-16 配置文件.mp4 [27.4 MB]
2-5 Interface- 接口 初探.mp4 [8.8 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]
📁 电子书
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-组件测试
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 组件
4-9 添加CSS Reset.mp4 [58.1 MB]
4-10 为 Button 添加样式.mp4 [127.1 MB]
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-组件库的打包以及发布
16-14【优质资源‖关注:cunWorkNotes 解锁】.mp4 [104.8 MB]
16-12.mp4 [97.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-10.mp4 [108.1 MB]
16-15.mp4 [139.7 MB]
16-11【持续更新‖免费提供:CunworknoteS】.mp4 [116.1 MB]
16-1 导学.mp4 [48.7 MB]
16-18.mp4 [72.7 MB]
16-16.mp4 [127.7 MB]
16-2 Javascript 模块化历史.mp4 [116.6 MB]
16-7.mp4 [82.9 MB]
📁 3- Vue3.0 结合 Typescript 基础知识全面补强
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-13 创建 useURLLoader【公重号:CunWorkNotes】.mp4 [61.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-8 watch 监听器.mp4 [57.6 MB]
3-9 生命周期和模版引用【持续更新‖免费提供:CunworknoteS】.mp4 [46.7 MB]
3-5 ESLint 配合 Vite 设置更多规则【公重号:CunWorkNotes】.mp4 [54.5 MB]
3-7 computed 计算属性.mp4 [26.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-更好的展示方式 - 使用工具生成文档
4【持续更新‖免费提供:CunworknoteS】.mp4 [280.9 MB]
📁 10-高难度 - Message 组件(有难度)
2.mp4 [286.2 MB]
3.mp4 [285.9 MB]
📁 1-课程介绍
1-2 代码库使用注意事项.mp4 [19.8 MB]
1-1 课程导学.mp4 [14.1 MB]
📁 12-进入表单的世界 - Input 组件
5【资源精选‖更多关注:CunworkNotes】.mp4 [280.4 MB]
6.mp4 [283.8 MB]
📁 15-大一统- Form 组件(有难度)
10【不易整理‖请关注:CunWorkNoteS】.mp4 [276.5 MB]
12.mp4 [369.6 MB]
11.mp4 [282.3 MB]
📁 14-魔高一丈- Select 组件(有难度)
8.mp4 [282.3 MB]
9.mp4 [280.2 MB]
📁 5-更近一步 Collapse 组件
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]
📁 13-狸猫换太子 - Switch 组件
7.mp4 [282.2 MB]
📁 9-现学现卖 - Dropdown 组件
1.mp4 [281.6 MB]
📁 6-它山之石 - Icon 组件
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]
📁 资料代码
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使用
构建并发布个人组件库
祝您学习愉快!
学有所成,前程似锦!






![[衡天云]爆款云服务器 低至12元/月](/hty.png)