Vue3+Vite+TS，element-plus业务组件二次封装实战教程（含源码）

前端开发

课程简介

解决什么问题：告别复制粘贴，构建可复用的前端物料日常中后台开发里，最耗时的往往不是写接口联调，而是反复处理表单弹窗、图标选择、状态切换这些琐碎交互。直接用底层框架，每个页面都要写一堆重复逻辑；硬抄旧项目，又容易把业务耦合带进来。这套资料聚焦的正是这块空白：把常用交互封装成独立业务组件，让后续页面开发只管传数据，不管控细节。它处理的典型场景包括图标选择器的…

已有 0 人浏览发布 2026-06-11 更新 2026-06-11

解决什么问题：告别复制粘贴，构建可复用的前端物料

日常中后台开发里，最耗时的往往不是写接口联调，而是反复处理表单弹窗、图标选择、状态切换这些琐碎交互。直接用底层框架，每个页面都要写一堆重复逻辑；硬抄旧项目，又容易把业务耦合带进来。这套资料聚焦的正是这块空白：把常用交互封装成独立业务组件，让后续页面开发只管传数据，不管控细节。它处理的典型场景包括图标选择器的弹层控制、全局组件的按需注册，以及基于组合式接口的状态隔离。如果你常被相似表单拖住进度，这部分内容能直接减少重复劳动。

适合什么基础与建议先看哪几块

这份资料不适合纯零基础。你得对 HTML、CSS、JavaScript 有基本掌握，写过简单的页面，最好接触过任意一款现代前端框架。资料默认你已经理解变量声明、模板语法这些概念，重点放在如何组织可复用代码。如果你完全没碰过组件化开发，建议先补基础语法再看。拿到资料后，不要按顺序从头刷，建议先看全局注册和弹框控制这两块。前者讲清楚怎么让组件在任意地方被调用，后者演示如何用监听器协调父子组件状态，这是封装交互组件最容易卡壳的地方。看懂这两段，你就能判断自己是否适应这种封装思路。资料里提到的类型约束，如果暂时看不懂，可以先跳过，重点抓逻辑流转。

学完能做什么与资料怎么配合练习

看完这套内容，你应当能独立完成中后台常见交互组件的封装，例如带远程搜索的下拉框、支持自定义图标的弹窗选择器，并把它们注册成全局组件供团队调用。更重要的是，你会形成一套自己的组件设计习惯：知道哪些逻辑该抽离、哪些配置该暴露给外部。练习时，不要只看不动。建议本地建一个空项目，跟着视频把图标选择器敲一遍，先不看源码。卡住时再去查配套的源码文件，对比自己写的差异。源码不是用来背的，是当字典查的。重点观察作者如何拆分状态、如何定义属性类型，把这些手法套用到你手头项目的另一个组件上，这套资料才算没白看。

Vue3+Vite+TS，element-plus业务组件二次封装实战教程（含源码）

深入Vue3与Element-Plus组件封装实战

编辑点评

实战导向，从基础到高级，全面掌握Vue3组件封装技巧，提升开发效率。

⭐ 编辑推荐

本教程深入讲解Vue3、Vite和TypeScript，结合element-plus组件，带你实战封装组件，提升前端开发能力。

课程亮点

•Vue3实战教程

•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开发者
前端工程师
组件开发爱好者

学习收获

掌握Vue3组件封装

提升开发效率

精通Element-Plus组件使用

祝您学习愉快！

学有所成，前程似锦！