为什么需要自行封装 Element Plus 组件

在使用 Vue3 进行企业级开发时，Element Plus 是标准配置，但它提供的通用组件往往无法完全贴合业务细节。例如，在后台管理系统的通知中心，标准的 List 组件可能缺乏对“未读状态”与“操作栏”的灵活控制；或者在数据可视化模块中，通用的表格无法直接展示带有上升下降箭头的趋势标记。这门课解决的核心问题，就是如何在不修改 Element Plus 源码的前提下，通过组合 API、封装逻辑和样式隔离，构建出符合特定业务场景的复合组件。它不是教你写一个通用的 UI 库，而是教你掌握“组件二次开发”的方法论，让你能从直接调用 API 过渡到能够定制组件行为。

适合基础与学习门槛

这门课适合已经掌握 Vue3 组合式 API（Composition API）基本用法，并熟悉 TypeScript 类型定义的开发者。如果你还对 ref、reactive 或计算属性感到陌生，建议先复习 Vue 官方文档，否则在封装过程中会对状态管理和数据流动产生困惑。课程不依赖高级架构设计，更侧重于实战中的 DOM 操作、事件绑定和样式调试。对于刚转行前端的新人，这可以作为连接基础语法与真实项目需求的桥梁；对于有一定经验的工程师，则是提升工程化思维、优化组件复用率的有效途径。

核心模块与练习建议

课程分为初级封装篇和拓展封装篇。建议优先学习“趋势标记”和“通知菜单”部分。在“趋势标记”章节中，重点观察如何利用计算属性动态改变文字颜色，以及如何通过动态绑定 class 实现颜色反转，这是理解响应式数据在 UI 层映射的关键。“通知菜单”章节则展示了如何将 icon 和 badge 组件组合，并封装出一个独立的 List 组件，最后融合进主菜单，这里涉及组件插槽的使用和状态管理。随后，进入拓展篇学习日历组件的定制，这部分难度稍高，涉及第三方库 FullCalendar 的配置以及自定义渲染节点的处理，适合在掌握基础封装逻辑后挑战。不要只看视频，务必在本地搭建 Vue3 + Vite + TS 环境，跟随教程手写一遍代码。特别是对于“自定义文字大小”和“禁用状态”的实现，尝试修改原有的 props 接口，测试其边界情况，比如传入非法参数时组件是否崩溃，通过这种“破坏性”练习，才能真正理解组件防御性编程的重要性。学完这部分内容，你将能够独立开发具有特定交互逻辑的复合组件，并在团队中规范化组件接口的定义与文档编写。

课程目录

📁 第3章封装组件初级篇（下） 3-9给趋势标记增加自定义文字大小功能(1)【资源精选‖更多关注：CunworkNotes】.pdf
 [44.7 KB] 3-10给通知菜单添加禁用状态【更多精选‖公众号：CunWorknotes】 .pdf
 [42.9 KB] 3-7通知菜单-封装一个列表组件(下)(1)【公重号：CunWorkNotes】.mp4
 [150.5 MB] 3-8通知菜单-完善list组件并融合进通知菜单.mp4
 [41.3 MB] 3-1本章概述(1).pdf
 [40.3 KB] 3-4趋势标记-计算属性的妙用实现文字颜色.mp4
 [57.8 MB] 3-4趋势标记-计算属性的妙用实现文字颜色(1).mp4
 [57.8 MB] 3-1本章概述.pdf
 [40.3 KB] 3-9给趋势标记增加自定义文字大小功能.pdf
 [44.7 KB] 3-2趋势标记-图标的组合使用实现上升下降趋势(1).mp4
 [83.9 MB] 3-6通知菜单-封装一个列表组件(上).mp4
 [85.6 MB] 3-11本章回顾(1).pdf
 [33.6 KB] 3-2趋势标记-图标的组合使用实现上升下降趋势.mp4
 [83.9 MB] 3-11本章回顾.pdf
 [33.6 KB] 3-3趋势标记-动态绑定class的妙用实现颜色反转(1).mp4
 [55.3 MB] 3-5通知菜单-icon和badge组件的组合使用(1).mp4
 [57.2 MB] 3-10给通知菜单添加禁用状态(1).pdf
 [42.9 KB] 3-5通知菜单-icon和badge组件的组合使用.mp4
 [57.2 MB] 3-3趋势标记-动态绑定class的妙用实现颜色反转.mp4
 [55.3 MB] 3-8通知菜单-完善list组件并融合进通知菜单(1).mp4
 [41.3 MB] 3-6通知菜单-封装一个列表组件(上)(1).mp4
 [85.6 MB] 3-7通知菜单-封装一个列表组件(下).mp4
 [150.5 MB] 📁 第7章封装组件拓展篇 7-4日历组件-日历的事件渲染和点击事件处理【优质资源‖关注：cunWorkNotes 解锁】.mp4
 [91.5 MB] 7-8日历自定义渲染内容使开始时间和结束时间字体都变成红色【优质资源‖关注：cunWorkNotes 解锁】.pdf
 [46.9 KB] 7-5日历组件-自定义渲染日历内容(1).mp4
 [59.0 MB] 7-6修复组件出现的样式问题(1).mp4
 [25.9 MB] 7-4日历组件-日历的事件渲染和点击事件处理(1).mp4
 [91.5 MB] 7-1本章概述(1).pdf
 [50.8 KB] 7-7将日历语言改成英文显示.pdf
 [43.1 KB] 7-8日历自定义渲染内容使开始时间和结束时间字体都变成红色(1).pdf
 [46.9 KB] 7-2日历组件-element-plus日历组件的不足和为何选择.mp4
 [40.9 MB] 7-6修复组件出现的样式问题.mp4
 [25.9 MB] 7-2日历组件-element-plus日历组件的不足和为何选择(1).mp4
 [40.9 MB] 7-3日历组件-使用fullcalendar配置生成日历(1).mp4
 [60.7 MB] 7-1本章概述.pdf
 [50.8 KB] 7-7将日历语言改成英文显示(1).pdf
 [43.1 KB] 7-5日历组件-自定义渲染日历内容.mp4
 [59.0 MB] 7-3日历组件-使用fullcalendar配置生成日历.mp4
 [60.7 MB] 📁 资料代码 m-element-components.zip
 [261.6 KB] m-element-components(1).zip
 [261.6 KB] 📁 第8章使用vuepress编写组件文档 8-9编写文档网站头部导航和侧边导航(1).mp4
 [78.6 MB] 8-10集成组件库并添加显示和交互(1).mp4
 [62.3 MB] 8-16完善组件库所有组件说明（5）【更多精选‖公众号：CunWorknotes】 .mp4
 [141.1 MB] 8-11编写组件库文档的快速上手.mp4
 [65.8 MB] 8-20给文档增加自定义logo【公重号：CunWorkNotes】.pdf
 [37.3 KB] 8-19给文档增加自己github和码云仓库地址【公重号：CunWorkNotes】.pdf
 [40.5 KB] 8-21本章回顾(1)【优质资源‖关注：cunWorkNotes 解锁】.pdf
 [34.2 KB] 8-15完善组件库所有组件说明（4）(1)【优质资源‖关注：cunWorkNotes 解锁】.mp4
 [47.1 MB] 8-2实现组件的全量打包(1).mp4
 [71.8 MB] 8-5如何更新已经发布的组件库版本【不易整理‖请关注：CunWorkNoteS】.mp4
 [49.9 MB] 8-2实现组件的全量打包.mp4
 [71.8 MB] 8-3单独打包每个组件实现按需引入【公重号：CunWorkNotes】.mp4
 [81.1 MB] 8-3单独打包每个组件实现按需引入(1).mp4
 [81.1 MB] 8-12完善组件库所有组件说明（1）.mp4
 [82.5 MB] 8-13完善组件库所有组件说明（2）(1).mp4
 [91.4 MB] 8-14完善组件库所有组件说明（3）(1).mp4
 [114.6 MB] 8-6如何在github部署预览项目(1).mp4
 [56.2 MB] 8-11编写组件库文档的快速上手(1).mp4
 [65.8 MB] 8-16完善组件库所有组件说明（5）(1).mp4
 [141.1 MB] 8-18完善组件库文档介绍(1).mp4
 [24.3 MB] 8-13完善组件库所有组件说明（2）.mp4
 [91.4 MB] 8-12完善组件库所有组件说明（1）(1).mp4
 [82.5 MB] 8-20给文档增加自定义logo(1).pdf
 [37.3 KB] 8-4发布组件库到npm.mp4
 [90.7 MB] 8-19给文档增加自己github和码云仓库地址(1).pdf
 [40.5 KB] 8-5如何更新已经发布的组件库版本(1).mp4
 [49.9 MB] 8-18完善组件库文档介绍.mp4
 [24.3 MB] 8-22组件库打包问题处理方案.pdf
 [56.2 KB] 8-10集成组件库并添加显示和交互.mp4
 [62.3 MB] 8-8组件库文档首页编写.mp4
 [47.0 MB] 8-7如何在码云部署预览项目.mp4
 [51.9 MB] 8-1本章概述.pdf
 [54.9 KB] 8-4发布组件库到npm(1).mp4
 [90.7 MB] 8-9编写文档网站头部导航和侧边导航.mp4
 [78.6 MB] 8-22组件库打包问题处理方案(1).pdf
 [56.2 KB] 8-21本章回顾.pdf
 [34.2 KB] 8-17完善组件库所有组件说明（6）.mp4
 [155.6 MB] 8-1本章概述(1).pdf
 [54.9 KB] 8-14完善组件库所有组件说明（3）.mp4
 [114.6 MB] 8-17完善组件库所有组件说明（6）(1).mp4
 [155.6 MB] 8-6如何在github部署预览项目.mp4
 [56.2 MB] 8-7如何在码云部署预览项目(1).mp4
 [51.9 MB] 8-15完善组件库所有组件说明（4）.mp4
 [47.1 MB] 8-8组件库文档首页编写(1).mp4
 [47.0 MB] 📁 第5章封装组件高级篇（上） 5-10表单组件-集成富文本编辑器wangeditor(1)【优质资源‖关注：cunWorkNotes 解锁】.mp4
 [75.1 MB] 5-7表单组件-单独处理上传组件-2(1).mp4
 [91.9 MB] 5-15表单组件-表单组件总结(1)【优质资源‖关注：cunWorkNotes 解锁】.mp4
 [28.7 MB] 5-17为表单增加自定义验证规则(1).pdf
 [44.2 KB] 5-5表单组件-巧用component动态组件配置添加子元素组件 .mp4
 [111.1 MB] 5-12表单组件-弹出框表单的基本结构(1).mp4
 [63.4 MB] 5-12表单组件-弹出框表单的基本结构【优质资源‖关注：cunWorkNotes 解锁】.mp4
 [63.4 MB] 5-13表单组件-使用defineExpose获取表单实例方法.mp4
 [89.5 MB] 5-6表单组件-单独处理上传组件-1【不易整理‖请关注：CunWorkNoteS】.mp4
 [110.5 MB] 5-9表单组件-完善表单上传逻辑(1).mp4
 [40.9 MB] 5-14表单组件-完善表单逻辑(1)【公重号：CunWorkNotes】.mp4
 [59.9 MB] 5-3表单组件-使用ts定义表单配置项的数据类型.mp4
 [81.2 MB] 5-11表单组件-完善表单重置逻辑.mp4
 [46.0 MB] 5-19本章回顾.pdf
 [37.2 KB] 5-2表单组件-一个强大的表单组件应该具备哪些功能(1).mp4
 [59.6 MB] 5-15表单组件-表单组件总结.mp4
 [28.7 MB] 5-18为表单增加剩余实例方法(1).pdf
 [44.2 KB] 5-18为表单增加剩余实例方法.pdf
 [44.2 KB] 5-5表单组件-巧用component动态组件配置添加子元素组件 (1).mp4
 [111.1 MB] 5-8表单组件-巧用插槽给表单加上操作项.mp4
 [100.1 MB] 5-8表单组件-巧用插槽给表单加上操作项(1).mp4
 [100.1 MB] 5-4表单组件-使用配置的数据完成一个基本版表单.mp4
 [99.7 MB] 5-9表单组件-完善表单上传逻辑.mp4
 [40.9 MB] 5-16拓展动态添加和删除表单(1).pdf
 [39.9 KB] 5-10表单组件-集成富文本编辑器wangeditor.mp4
 [75.1 MB] 5-19本章回顾(1).pdf
 [37.2 KB] 5-2表单组件-一个强大的表单组件应该具备哪些功能.mp4
 [59.6 MB] 5-4表单组件-使用配置的数据完成一个基本版表单(1).mp4
 [99.7 MB] 5-16拓展动态添加和删除表单.pdf
 [39.9 KB] 5-1本章概述(1).pdf
 [59.9 KB] 5-14表单组件-完善表单逻辑.mp4
 [59.9 MB] 5-6表单组件-单独处理上传组件-1(1).mp4
 [110.5 MB] 5-7表单组件-单独处理上传组件-2.mp4
 [91.9 MB] 5-11表单组件-完善表单重置逻辑(1).mp4
 [46.0 MB] 5-3表单组件-使用ts定义表单配置项的数据类型(1).mp4
 [81.2 MB] 5-1本章概述.pdf
 [59.9 KB] 5-17为表单增加自定义验证规则.pdf
 [44.2 KB] 5-13表单组件-使用defineExpose获取表单实例方法(1).mp4
 [89.5 MB] 📁 第2章封装组件初级篇（上） 2-16本章回顾(1).pdf
 [44.8 KB] 2-10省市区选择组件-利用github获取到省市区数据(1).mp4
 [61.9 MB] 2-8图标选择器-利用命名空间修改dialog样式(1).mp4
 [46.2 MB] 2-8图标选择器-利用命名空间修改dialog样式【整理不易‖记得关注：CunWorKNotes】.mp4
 [46.2 MB] 2-5伸缩菜单-抽离头部和侧边栏组件并完善伸缩菜单.mp4
 [49.9 MB] 2-2搭建vite项目并配置路由和element-plus.mp4
 [55.1 MB] 2-2搭建vite项目并配置路由和element-plus(1).mp4
 [55.1 MB] 2-10省市区选择组件-利用github获取到省市区数据.mp4
 [61.9 MB] 2-3全局注册图标.mp4
 [50.2 MB] 2-1本章概述.pdf
 [58.0 KB] 2-4伸缩菜单-完成伸缩菜单基本功能.mp4
 [66.0 MB] 2-13利用app.use特性全局注册组件.mp4
 [38.5 MB] 2-6图标选择器-巧用两次watch控制弹框的显示与隐藏.mp4
 [96.2 MB] 2-16本章回顾.pdf
 [44.8 KB] 2-11省市区选择组件-巧用watch来达到三级联动效果(1).mp4
 [64.4 MB] 2-7图标选择器-巧用component动态组件显示所有的图标(1).mp4
 [59.2 MB] 2-12省市区选择组件-完善省市区联动组件并给父组件分发事件(1).mp4
 [57.2 MB] 2-13利用app.use特性全局注册组件(1).mp4
 [38.5 MB] 2-6图标选择器-巧用两次watch控制弹框的显示与隐藏(1).mp4
 [96.2 MB] 2-1本章概述(1).pdf
 [58.0 KB] 2-3全局注册图标(1).mp4
 [50.2 MB] 2-4伸缩菜单-完成伸缩菜单基本功能(1).mp4
 [66.0 MB] 2-7图标选择器-巧用component动态组件显示所有的图标.mp4
 [59.2 MB] 2-9图标选择器-通过自定义hooks函数实现复制功能.mp4
 [39.7 MB] 2-5伸缩菜单-抽离头部和侧边栏组件并完善伸缩菜单(1).mp4
 [49.9 MB] 2-12省市区选择组件-完善省市区联动组件并给父组件分发事件.mp4
 [57.2 MB] 2-11省市区选择组件-巧用watch来达到三级联动效果.mp4
 [64.4 MB] 2-9图标选择器-通过自定义hooks函数实现复制功能(1).mp4
 [39.7 MB] 📁 第4章封装组件中级篇 4-15城市选择组件-使用filter-method实现搜索过滤(1)【公重号：CunWorkNotes】.mp4
 [127.4 MB] 4-6进度条-完成进度条动态加载效果(1)【持续更新‖免费提供：CunworknoteS】.mp4
 [78.3 MB] 4-16本章回顾(1)【整理不易‖记得关注：CunWorKNotes】.pdf
 [43.3 KB] 4-13城市选择组件-绑定事件并实现点击字母跳转到对应区域(1).mp4
 [72.9 MB] 4-11城市选择组件-组合式使用组件完成基本布局(1).mp4
 [119.6 MB] 4-5导航菜单-完善细节并增加自定义键名功能(1).mp4
 [66.8 MB] 4-6进度条-完成进度条动态加载效果.mp4
 [78.3 MB] 4-1导航菜单-导航菜单的需求分析和数据设计(1).mp4
 [62.0 MB] 4-10时间选择组件-修复日期选择组件结束日期未清空问题.mp4
 [9.5 MB] 4-3导航菜单-使用tsx实现无限层级菜单.mp4
 [98.8 MB] 4-7给进度条组件加上进度完成事件(1)【持续更新‖免费提供：CunworknoteS】.pdf
 [44.1 KB] 4-4导航菜单-利用封装好的导航菜单组件改造项目整体结构.mp4
 [47.7 MB] 4-5导航菜单-完善细节并增加自定义键名功能.mp4
 [66.8 MB] 4-12城市选择组件-获取城市数据并显示所有城市.mp4
 [90.5 MB] 4-4导航菜单-利用封装好的导航菜单组件改造项目整体结构(1).mp4
 [47.7 MB] 4-16本章回顾.pdf
 [43.3 KB] 4-13城市选择组件-绑定事件并实现点击字母跳转到对应区域.mp4
 [72.9 MB] 4-9时间选择组件-完成日期选择组件所有功能(1).mp4
 [93.9 MB] 4-9时间选择组件-完成日期选择组件所有功能.mp4
 [93.9 MB] 4-2导航菜单-巧用template实现两级结构的菜单(1).mp4
 [71.9 MB] 4-10时间选择组件-修复日期选择组件结束日期未清空问题(1).mp4
 [9.5 MB] 4-3导航菜单-使用tsx实现无限层级菜单(1).mp4
 [98.8 MB] 4-14城市选择组件-完善按省份选择城市(1).mp4
 [131.8 MB] 4-1导航菜单-导航菜单的需求分析和数据设计.mp4
 [62.0 MB] 4-15城市选择组件-使用filter-method实现搜索过滤.mp4
 [127.4 MB] 4-7给进度条组件加上进度完成事件.pdf
 [44.1 KB] 4-8时间选择组件-完成时间选择组件的全部功能(1).mp4
 [104.8 MB] 4-14城市选择组件-完善按省份选择城市.mp4
 [131.8 MB] 4-12城市选择组件-获取城市数据并显示所有城市(1).mp4
 [90.5 MB] 4-2导航菜单-巧用template实现两级结构的菜单.mp4
 [71.9 MB] 4-11城市选择组件-组合式使用组件完成基本布局.mp4
 [119.6 MB] 4-8时间选择组件-完成时间选择组件的全部功能.mp4
 [104.8 MB] 📁 第6章封装组件高级篇（下） 6-15本章回顾(1).pdf
 [35.0 KB] 6-12拓展表格排序功能(1).pdf
 [39.0 KB] 6-7表格组件-实现可编辑单元格功能【整理不易‖记得关注：CunWorKNotes】.mp4
 [160.0 MB] 6-9表格组件-实现可编辑行功能-2(1).mp4
 [59.6 MB] 6-2表格组件-一个强大的表格应该具备哪些功能【公重号：CunWorkNotes】.mp4
 [39.0 MB] 6-13拓展表格单选功能.pdf
 [46.4 KB] 6-5表格组件-巧用插槽实现操作项和自定义列数据(1).mp4
 [87.9 MB] 6-6表格组件-为表格加上loading效果(1).mp4
 [59.8 MB] 6-10表格组件-修复冒泡事件带来的问题(1)【不易整理‖请关注：CunWorkNoteS】.mp4
 [41.7 MB] 6-14拓展表格多选功能.pdf
 [47.1 KB] … 其余 

25 项略，目录共 225 项