基于Vue3+Vite+TS，二次封装element-plus业务组件

前端开发

课程简介

mksz551-基于Vue3+Vite+TS，二次封装element-plus业务组件 Vue3+Vite+TS，element-plus组件封装实战编辑点评深入浅出Vue3组件封装，从基础到高级，掌握element-plus组件二次开发技巧。 ⭐ 编辑推荐本课程全面解析Vue3+Vite+TS环境下，element-plus组件的二次封装方法。通…

已有 5 人浏览发布 2026-05-23 更新 2026-10-08

mksz551-基于Vue3+Vite+TS，二次封装element-plus业务组件

Vue3+Vite+TS，element-plus组件封装实战

编辑点评

深入浅出Vue3组件封装，从基础到高级，掌握element-plus组件二次开发技巧。

⭐ 编辑推荐

本课程全面解析Vue3+Vite+TS环境下，element-plus组件的二次封装方法。
通过实战案例，学习组件封装的技巧和最佳实践。

✨ 课程亮点

✦Vue3+Vite+TS实战

✦element-plus组件封装

✦从基础到高级

课程目录

第2章封装组件初级篇（上）28 集

2-3全局注册图标(1).mp4 [50.2 MB]
2-13利用app.use特性全局注册组件(1).mp4 [38.5 MB]
2-6图标选择器-巧用两次watch控制弹框的显示与隐藏.mp4 [96.2 MB]
2-6图标选择器-巧用两次watch控制弹框的显示与隐藏(1).mp4 [96.2 MB]
2-10省市区选择组件-利用github获取到省市区数据(1).mp4 [61.9 MB]
2-7图标选择器-巧用component动态组件显示所有的图标.mp4 [59.2 MB]
2-12省市区选择组件-完善省市区联动组件并给父组件分发事件.mp4 [57.2 MB]
2-12省市区选择组件-完善省市区联动组件并给父组件分发事件(1).mp4 [57.2 MB]
2-2搭建vite项目并配置路由和element-plus(1).mp4 [55.1 MB]
2-11省市区选择组件-巧用watch来达到三级联动效果(1).mp4 [64.4 MB]
2-11省市区选择组件-巧用watch来达到三级联动效果.mp4 [64.4 MB]
2-4伸缩菜单-完成伸缩菜单基本功能(1).mp4 [66.0 MB]
2-1本章概述.pdf [58.0 KB]
2-8图标选择器-利用命名空间修改dialog样式(1).mp4 [46.2 MB]
2-8图标选择器-利用命名空间修改dialog样式.mp4 [46.2 MB]
2-10省市区选择组件-利用github获取到省市区数据.mp4 [61.9 MB]
2-2搭建vite项目并配置路由和element-plus.mp4 [55.1 MB]
2-13利用app.use特性全局注册组件.mp4 [38.5 MB]
2-7图标选择器-巧用component动态组件显示所有的图标(1).mp4 [59.2 MB]
2-5伸缩菜单-抽离头部和侧边栏组件并完善伸缩菜单(1).mp4 [49.9 MB]
2-9图标选择器-通过自定义hooks函数实现复制功能(1).mp4 [39.7 MB]
2-16本章回顾.pdf [44.8 KB]
2-16本章回顾(1).pdf [44.8 KB]
2-3全局注册图标.mp4 [50.2 MB]
2-9图标选择器-通过自定义hooks函数实现复制功能.mp4 [39.7 MB]
2-4伸缩菜单-完成伸缩菜单基本功能.mp4 [66.0 MB]
2-5伸缩菜单-抽离头部和侧边栏组件并完善伸缩菜单.mp4 [49.9 MB]
2-1本章概述(1).pdf [58.0 KB]

第5章封装组件高级篇（上）38 集

第1章课程简介2 集

1-2二次封装的意义.mp4 [23.6 MB]
1-2二次封装的意义(1).mp4 [23.6 MB]

第7章封装组件拓展篇16 集

7-2日历组件-element-plus日历组件的不足和为何选择(1).mp4 [40.9 MB]
7-7将日历语言改成英文显示(1).pdf [43.1 KB]
7-7将日历语言改成英文显示.pdf [43.1 KB]
7-4日历组件-日历的事件渲染和点击事件处理(1).mp4 [91.5 MB]
7-5日历组件-自定义渲染日历内容(1).mp4 [59.0 MB]
7-8日历自定义渲染内容使开始时间和结束时间字体都变成红色(1).pdf [46.9 KB]
7-1本章概述.pdf [50.8 KB]
7-2日历组件-element-plus日历组件的不足和为何选择.mp4 [40.9 MB]
7-3日历组件-使用fullcalendar配置生成日历.mp4 [60.7 MB]
7-8日历自定义渲染内容使开始时间和结束时间字体都变成红色.pdf [46.9 KB]
7-1本章概述(1).pdf [50.8 KB]
7-6修复组件出现的样式问题.mp4 [25.9 MB]
7-5日历组件-自定义渲染日历内容.mp4 [59.0 MB]
7-4日历组件-日历的事件渲染和点击事件处理.mp4 [91.5 MB]
7-6修复组件出现的样式问题(1).mp4 [25.9 MB]
7-3日历组件-使用fullcalendar配置生成日历(1).mp4 [60.7 MB]

第4章封装组件中级篇32 集

第6章封装组件高级篇（下）30 集

6-14拓展表格多选功能(1).pdf [47.1 KB]
6-15本章回顾(1).pdf [35.0 KB]
6-1本章概述.pdf [56.1 KB]
6-4表格组件-通过配置的数据完成一个基础版表格.mp4 [37.4 MB]
6-7表格组件-实现可编辑单元格功能.mp4 [160.0 MB]
6-13拓展表格单选功能(1).pdf [46.4 KB]
6-4表格组件-通过配置的数据完成一个基础版表格(1).mp4 [37.4 MB]
6-8表格组件-实现可编辑行功能-1.mp4 [71.2 MB]
6-8表格组件-实现可编辑行功能-1(1).mp4 [71.2 MB]
6-5表格组件-巧用插槽实现操作项和自定义列数据(1).mp4 [87.9 MB]
6-14拓展表格多选功能.pdf [47.1 KB]
6-3表格组件-使用ts定义表格组件需要的类型.mp4 [38.7 MB]
6-10表格组件-修复冒泡事件带来的问题.mp4 [41.7 MB]
6-3表格组件-使用ts定义表格组件需要的类型(1).mp4 [38.7 MB]
6-15本章回顾.pdf [35.0 KB]
6-2表格组件-一个强大的表格应该具备哪些功能.mp4 [39.0 MB]
6-9表格组件-实现可编辑行功能-2(1).mp4 [59.6 MB]
6-12拓展表格排序功能.pdf [39.0 KB]
6-13拓展表格单选功能.pdf [46.4 KB]
6-11表格组件-实现表格分页功能.mp4 [111.6 MB]
6-11表格组件-实现表格分页功能(1).mp4 [111.6 MB]
6-9表格组件-实现可编辑行功能-2.mp4 [59.6 MB]
6-12拓展表格排序功能(1).pdf [39.0 KB]
6-7表格组件-实现可编辑单元格功能(1).mp4 [160.0 MB]
6-2表格组件-一个强大的表格应该具备哪些功能(1).mp4 [39.0 MB]
6-1本章概述(1).pdf [56.1 KB]
6-5表格组件-巧用插槽实现操作项和自定义列数据.mp4 [87.9 MB]
6-10表格组件-修复冒泡事件带来的问题(1).mp4 [41.7 MB]
6-6表格组件-为表格加上loading效果(1).mp4 [59.8 MB]
6-6表格组件-为表格加上loading效果.mp4 [59.8 MB]

第3章封装组件初级篇（下）22 集

3-4趋势标记-计算属性的妙用实现文字颜色.mp4 [57.8 MB]
3-6通知菜单-封装一个列表组件(上)(1).mp4 [85.6 MB]
3-2趋势标记-图标的组合使用实现上升下降趋势(1).mp4 [83.9 MB]
3-5通知菜单-icon和badge组件的组合使用(1).mp4 [57.2 MB]
3-11本章回顾(1).pdf [33.6 KB]
3-6通知菜单-封装一个列表组件(上).mp4 [85.6 MB]
3-2趋势标记-图标的组合使用实现上升下降趋势.mp4 [83.9 MB]
3-5通知菜单-icon和badge组件的组合使用.mp4 [57.2 MB]
3-11本章回顾.pdf [33.6 KB]
3-8通知菜单-完善list组件并融合进通知菜单(1).mp4 [41.3 MB]
3-10给通知菜单添加禁用状态.pdf [42.9 KB]
3-1本章概述(1).pdf [40.3 KB]
3-9给趋势标记增加自定义文字大小功能(1).pdf [44.7 KB]
3-8通知菜单-完善list组件并融合进通知菜单.mp4 [41.3 MB]
3-10给通知菜单添加禁用状态(1).pdf [42.9 KB]
3-3趋势标记-动态绑定class的妙用实现颜色反转(1).mp4 [55.3 MB]
3-7通知菜单-封装一个列表组件(下)(1).mp4 [150.5 MB]
3-7通知菜单-封装一个列表组件(下).mp4 [150.5 MB]
3-4趋势标记-计算属性的妙用实现文字颜色(1).mp4 [57.8 MB]
3-9给趋势标记增加自定义文字大小功能.pdf [44.7 KB]
3-1本章概述.pdf [40.3 KB]
3-3趋势标记-动态绑定class的妙用实现颜色反转.mp4 [55.3 MB]

资料代码2 条

m-element-components(1).zip [261.6 KB]
m-element-components.zip [261.6 KB]

第8章使用vuepress编写组件文档44 集

适合人群

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

🎯 学习收获

掌握element-plus组件封装
提升组件开发能力
构建高效的前端应用

🎉 祝您学习愉快！

课程目录

第1章 课程简介
第2章 封装组件初级篇（上）
第3章 封装组件初级篇（下）
第4章 封装组件中级篇
第5章 封装组件高级篇（上）
第6章 封装组件高级篇（下）
第7章 封装组件拓展篇
第8章 使用vuepress 编写组件文档