getfromcode

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

前端开发
课程简介

Vue3+Vite+TypeScript，element-plus组件二次封装实战教程（含源码） 深入Vue3与Element-Plus组件封装实战 编辑点评 实战导向，从基础到高级，全面掌握Vue3组件封装技巧，提升开发效率。 ⭐ 编辑推荐 本教程深入讲解Vue3、Vite和TypeScript，结合element-plus组件，带你实战封装组件，提升前…

已有 4 人浏览 发布 2026-05-26 更新 2026-09-29

Vue3+Vite+TypeScript，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 集
  • 5-1本章概述.pdf [59.9 KB]
  • 5-4表单组件-使用配置的数据完成一个基本版表单(1).mp4 [99.7 MB]
  • 5-7表单组件-单独处理上传组件-2.mp4 [91.9 MB]
  • 5-19本章回顾.pdf [37.2 KB]
  • 5-8表单组件-巧用插槽给表单加上操作项.mp4 [100.1 MB]
  • 5-5表单组件-巧用component动态组件配置添加子元素组件.mp4 [111.1 MB]
  • 5-1本章概述(1).pdf [59.9 KB]
  • 5-4表单组件-使用配置的数据完成一个基本版表单.mp4 [99.7 MB]
  • 5-2表单组件-一个强大的表单组件应该具备哪些功能(1).mp4 [59.6 MB]
  • 5-10表单组件-集成富文本编辑器wangeditor.mp4 [75.1 MB]
  • 5-16拓展动态添加和删除表单.pdf [39.9 KB]
  • 5-9表单组件-完善表单上传逻辑(1).mp4 [40.9 MB]
  • 5-19本章回顾(1).pdf [37.2 KB]
  • 5-11表单组件-完善表单重置逻辑(1).mp4 [46.0 MB]
  • 5-8表单组件-巧用插槽给表单加上操作项(1).mp4 [100.1 MB]
  • 5-18为表单增加剩余实例方法.pdf [44.2 KB]
  • 5-14表单组件-完善表单逻辑(1).mp4 [59.9 MB]
  • 5-7表单组件-单独处理上传组件-2(1).mp4 [91.9 MB]
  • 5-6表单组件-单独处理上传组件-1(1).mp4 [110.5 MB]
  • 5-15表单组件-表单组件总结(1).mp4 [28.7 MB]
  • 5-12表单组件-弹出框表单的基本结构(1).mp4 [63.4 MB]
  • 5-3表单组件-使用ts定义表单配置项的数据类型(1).mp4 [81.2 MB]
  • 5-16拓展动态添加和删除表单(1).pdf [39.9 KB]
  • 5-5表单组件-巧用component动态组件配置添加子元素组件 (1).mp4 [111.1 MB]
  • 5-15表单组件-表单组件总结.mp4 [28.7 MB]
  • 5-9表单组件-完善表单上传逻辑.mp4 [40.9 MB]
  • 5-3表单组件-使用ts定义表单配置项的数据类型.mp4 [81.2 MB]
  • 5-18为表单增加剩余实例方法(1).pdf [44.2 KB]
  • 5-13表单组件-使用defineExpose获取表单实例方法.mp4 [89.5 MB]
  • 5-17为表单增加自定义验证规则(1).pdf [44.2 KB]
  • 5-14表单组件-完善表单逻辑.mp4 [59.9 MB]
  • 5-11表单组件-完善表单重置逻辑.mp4 [46.0 MB]
  • 5-12表单组件-弹出框表单的基本结构.mp4 [63.4 MB]
  • 5-13表单组件-使用defineExpose获取表单实例方法(1).mp4 [89.5 MB]
  • 5-10表单组件-集成富文本编辑器wangeditor(1).mp4 [75.1 MB]
  • 5-17为表单增加自定义验证规则.pdf [44.2 KB]
  • 5-2表单组件-一个强大的表单组件应该具备哪些功能.mp4 [59.6 MB]
  • 5-6表单组件-单独处理上传组件-1.mp4 [110.5 MB]
第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 集
  • 4-8时间选择组件-完成时间选择组件的全部功能(1).mp4 [104.8 MB]
  • 4-13城市选择组件-绑定事件并实现点击字母跳转到对应区域(1).mp4 [72.9 MB]
  • 4-2导航菜单-巧用template实现两级结构的菜单(1).mp4 [71.9 MB]
  • 4-15城市选择组件-使用filter-method实现搜索过滤.mp4 [127.4 MB]
  • 4-12城市选择组件-获取城市数据并显示所有城市.mp4 [90.5 MB]
  • 4-4导航菜单-利用封装好的导航菜单组件改造项目整体结构.mp4 [47.7 MB]
  • 4-13城市选择组件-绑定事件并实现点击字母跳转到对应区域.mp4 [72.9 MB]
  • 4-8时间选择组件-完成时间选择组件的全部功能.mp4 [104.8 MB]
  • 4-11城市选择组件-组合式使用组件完成基本布局.mp4 [119.6 MB]
  • 4-6进度条-完成进度条动态加载效果(1).mp4 [78.3 MB]
  • 4-14城市选择组件-完善按省份选择城市(1).mp4 [131.8 MB]
  • 4-2导航菜单-巧用template实现两级结构的菜单.mp4 [71.9 MB]
  • 4-1导航菜单-导航菜单的需求分析和数据设计.mp4 [62.0 MB]
  • 4-7给进度条组件加上进度完成事件(1).pdf [44.1 KB]
  • 4-6进度条-完成进度条动态加载效果.mp4 [78.3 MB]
  • 4-15城市选择组件-使用filter-method实现搜索过滤(1).mp4 [127.4 MB]
  • 4-1导航菜单-导航菜单的需求分析和数据设计(1).mp4 [62.0 MB]
  • 4-7给进度条组件加上进度完成事件.pdf [44.1 KB]
  • 4-11城市选择组件-组合式使用组件完成基本布局(1).mp4 [119.6 MB]
  • 4-16本章回顾.pdf [43.3 KB]
  • 4-5导航菜单-完善细节并增加自定义键名功能.mp4 [66.8 MB]
  • 4-5导航菜单-完善细节并增加自定义键名功能(1).mp4 [66.8 MB]
  • 4-9时间选择组件-完成日期选择组件所有功能.mp4 [93.9 MB]
  • 4-12城市选择组件-获取城市数据并显示所有城市(1).mp4 [90.5 MB]
  • 4-10时间选择组件-修复日期选择组件结束日期未清空问题.mp4 [9.5 MB]
  • 4-10时间选择组件-修复日期选择组件结束日期未清空问题(1).mp4 [9.5 MB]
  • 4-3导航菜单-使用tsx实现无限层级菜单.mp4 [98.8 MB]
  • 4-14城市选择组件-完善按省份选择城市.mp4 [131.8 MB]
  • 4-9时间选择组件-完成日期选择组件所有功能(1).mp4 [93.9 MB]
  • 4-3导航菜单-使用tsx实现无限层级菜单(1).mp4 [98.8 MB]
  • 4-4导航菜单-利用封装好的导航菜单组件改造项目整体结构(1).mp4 [47.7 MB]
  • 4-16本章回顾(1).pdf [43.3 KB]
第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 集
  • 8-2实现组件的全量打包(1).mp4 [71.8 MB]
  • 8-5如何更新已经发布的组件库版本(1).mp4 [49.9 MB]
  • 8-14完善组件库所有组件说明（3）.mp4 [114.6 MB]
  • 8-13完善组件库所有组件说明（2）.mp4 [91.4 MB]
  • 8-7如何在码云部署预览项目(1).mp4 [51.9 MB]
  • 8-11编写组件库文档的快速上手(1).mp4 [65.8 MB]
  • 8-16完善组件库所有组件说明（5）.mp4 [141.1 MB]
  • 8-17完善组件库所有组件说明（6）.mp4 [155.6 MB]
  • 8-4发布组件库到npm.mp4 [90.7 MB]
  • 8-8组件库文档首页编写.mp4 [47.0 MB]
  • 8-15完善组件库所有组件说明（4）.mp4 [47.1 MB]
  • 8-19给文档增加自己github和码云仓库地址(1).pdf [40.5 KB]
  • 8-9编写文档网站头部导航和侧边导航(1).mp4 [78.6 MB]
  • 8-20给文档增加自定义logo.pdf [37.3 KB]
  • 8-1本章概述.pdf [54.9 KB]
  • 8-10集成组件库并添加显示和交互(1).mp4 [62.3 MB]
  • 8-7如何在码云部署预览项目.mp4 [51.9 MB]
  • 8-21本章回顾.pdf [34.2 KB]
  • 8-16完善组件库所有组件说明（5）(1).mp4 [141.1 MB]
  • 8-22组件库打包问题处理方案(1).pdf [56.2 KB]
  • 8-18完善组件库文档介绍(1).mp4 [24.3 MB]
  • 8-3单独打包每个组件实现按需引入(1).mp4 [81.1 MB]
  • 8-3单独打包每个组件实现按需引入.mp4 [81.1 MB]
  • 8-20给文档增加自定义logo(1).pdf [37.3 KB]
  • 8-8组件库文档首页编写(1).mp4 [47.0 MB]
  • 8-9编写文档网站头部导航和侧边导航.mp4 [78.6 MB]
  • 8-1本章概述(1).pdf [54.9 KB]
  • 8-6如何在github部署预览项目.mp4 [56.2 MB]
  • 8-21本章回顾(1).pdf [34.2 KB]
  • 8-22组件库打包问题处理方案.pdf [56.2 KB]
  • 8-18完善组件库文档介绍.mp4 [24.3 MB]
  • 8-5如何更新已经发布的组件库版本.mp4 [49.9 MB]
  • 8-4发布组件库到npm(1).mp4 [90.7 MB]
  • 8-15完善组件库所有组件说明（4）(1).mp4 [47.1 MB]
  • 8-17完善组件库所有组件说明（6）(1).mp4 [155.6 MB]
  • 8-6如何在github部署预览项目(1).mp4 [56.2 MB]
  • 8-14完善组件库所有组件说明（3）(1).mp4 [114.6 MB]
  • 8-10集成组件库并添加显示和交互.mp4 [62.3 MB]
  • 8-11编写组件库文档的快速上手.mp4 [65.8 MB]
  • 8-12完善组件库所有组件说明（1）.mp4 [82.5 MB]
  • 8-19给文档增加自己github和码云仓库地址.pdf [40.5 KB]
  • 8-13完善组件库所有组件说明（2）(1).mp4 [91.4 MB]
  • 8-12完善组件库所有组件说明（1）(1).mp4 [82.5 MB]
  • 8-2实现组件的全量打包.mp4 [71.8 MB]

适合人群

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

🎯 学习收获

  • 掌握Vue3组件封装
  • 提升开发效率
  • 精通Element-Plus组件使用

🎉 祝您学习愉快！

相关推荐
熠辉ai编程课
熠辉ai编程课
¥29.9 · 56 浏览
产品老曾课程4套合集
产品老曾课程4套合集
¥29.9 · 37 浏览
蔡老板-AST入门实战与JavaScript补环境课程
蔡老板-AST入门实战与JavaScript补环境课程
¥29.9 · 27 浏览
乐魔leo游戏UI动效0基础系统课
乐魔leo游戏UI动效0基础系统课
¥29.9 · 21 浏览
测试
测试
¥29 · 14 浏览
【起点课堂】90天产品经理实战24期 - 带源码课件
【起点课堂】90天产品经理实战24期 - 带源码课件
¥29.9 · 13 浏览
慕课网-全栈开发高可扩展，高可维护性“当当书城WebApp”
慕课网-全栈开发高可扩展，高可维护性“当当书城WebApp”
¥29.9 · 13 浏览
李大熊-PPT新手到大神
李大熊-PPT新手到大神
¥29.9 · 6 浏览
精通CSS：高级Web标准解决方案(第2版).pdf
精通CSS：高级Web标准解决方案(第2版).pdf
¥29 · 270 浏览
2026 Flutter移动应用开发实战课程
2026 Flutter移动应用开发实战课程
¥50 · 207 浏览
前端跳槽突围课：React18底层源码深入剖析(完结)
前端跳槽突围课：React18底层源码深入剖析(完结)
¥29 · 194 浏览
Angular 打造企业级协作平台
Angular 打造企业级协作平台
¥29 · 169 浏览
课程购买
课程价格
金币29.9
299金币限时优惠会员免费
销量：0
💎 开通会员每日免费下载，比单买更划算 →
支付成功后会自动显示下载资源云盘的链接！点击链接即可下载到本地。
[衡天云]爆款云服务器 低至12元/月
[衡天云]爆款云服务器 低至12元/月