课程是一套专为希望提升 Vue3 工程化能力与组件封装水平的中高级前端开发者量身打造的实战教程。课程以”Vite + Vue3 + TypeScript 项目搭建→基础业务组件封装→中级业务组件封装→高级业务组件封装→日历组件扩展→VuePress 文档编写与 npm 发布”为核心路径，系统性地串联起从项目环境初始化、Element Plus 集成、全局图标注册，到伸缩菜单（含头部/侧边栏抽离）、图标选择器（动态组件 + 命名空间样式 + 自定义 Hooks 复制）、省市区三级联动选择器、趋势标记组件（动态 class + 计算属性）、通知菜单（Icon + Badge + 列表组件封装），再到导航菜单（Template 两级结构 + TSX 无限层级）、进度条、时间/日期选择器、城市选择器（字母跳转 + 省份筛选 + 搜索过滤），以及表单组件（TypeScript 配置化 + 动态子组件 + 上传 + 富文本编辑器集成）、表格组件（分页 + 插槽自定义 + Loading + 可编辑单元格/行），最后到日历组件（FullCalendar 集成）与 VuePress 组件文档编写、组件库打包发布到 npm、GitHub/Gitee 预览部署的完整工程链路。配合真实项目源码（m-element-components）与作业练习，助你从零构建一套可复用的 Element Plus 业务组件库。
核心学习路径
1. 课程导论（第1章）
课程导学：了解课程整体架构、学习目标与 Element Plus 业务组件库的技术栈选型。
二次封装的意义：深入理解在 Element Plus 基础上进行业务组件二次封装的价值与最佳实践。
2. 封装组件初级篇（上）（第2章）
项目搭建：使用 Vite 创建 Vue3 + TypeScript 项目，配置路由与 Element Plus。
全局图标注册：统一配置 Element Plus 图标的全局注册方案。
伸缩菜单：完成伸缩菜单基本功能，抽离头部（navHeader）和侧边栏（navSide）组件并完善菜单交互。
图标选择器：巧用两次 watch 控制弹框显示与隐藏，利用 component 动态组件渲染所有图标，通过命名空间修改 Dialog 样式，自定义 Hooks 函数实现图标复制功能。
省市区选择组件：利用 GitHub 获取省市区数据，巧用 watch 实现三级联动效果，完善联动组件并向父组件分发事件。
全局注册：利用 app.use 特性实现组件的全局注册。
3. 封装组件初级篇（下）（第3章）
趋势标记组件：通过图标组合实现上升/下降趋势展示，动态绑定 class 实现颜色反转，计算属性实现文字颜色动态切换。
通知菜单组件：Icon 与 Badge 组件组合使用，封装通用列表组件（上/下），完善列表组件并融合进通知菜单。
4. 封装组件中级篇（第4章）
导航菜单组件：需求分析与数据设计，巧用 template 实现两级结构菜单，使用 TSX 实现无限层级菜单渲染，利用封装好的导航菜单组件改造项目整体结构，完善细节并增加自定义键名功能。
进度条组件：完成进度条的动态加载效果。
时间/日期选择组件：完成时间选择组件全部功能，完成日期选择组件所有功能，修复日期选择组件结束日期未清空问题。
城市选择组件：组合式使用组件完成基本布局，获取城市数据并显示所有城市，绑定事件实现点击字母跳转到对应区域，完善按省份选择城市，使用 filter-method 实现搜索过滤。
5. 封装组件高级篇（上）（第5章）
表单组件设计：定义强大表单组件应具备的功能，使用 TypeScript 定义表单配置项的数据类型，通过配置数据完成基础版表单。
动态子组件：巧用 component 动态组件配置添加子元素组件，单独处理上传组件（上/下）。
高级功能：巧用插槽给表单加上操作项，完善表单上传逻辑，集成富文本编辑器 wangeditor，完善表单重置逻辑。
弹出框表单：实现弹出框表单的基本结构，使用 defineExpose 获取表单实例方法，完善表单逻辑。
表单总结：总结表单组件的设计模式与使用技巧。
6. 封装组件高级篇（下）（第6章）
表格组件设计：定义强大表格组件应具备的功能，使用 TypeScript 定义表格类型，通过配置数据完成基础版表格。
高级表格功能：巧用插槽实现操作项和自定义列数据，为表格添加 Loading 效果，实现可编辑单元格功能，实现可编辑行功能（上/下），修复冒泡事件带来的问题，实现表格分页功能。
7. 封装组件拓展篇（第7章）
日历组件：分析 Element Plus 日历组件的不足与扩展需求，使用 FullCalendar 配置生成日历，处理日历事件渲染与点击事件，自定义渲染日历内容，修复组件样式问题。
8. 使用 VuePress 编写组件文档（第8章）
组件打包：实现组件的全量打包，单独打包每个组件实现按需引入。
npm 发布：将组件库发布到 npm，学习如何更新已发布的组件库版本。
预览部署：在 GitHub Pages 和码云部署预览项目。
文档编写：使用 VuePress 编写组件库文档首页、头部导航、侧边导航，集成组件库并添加显示和交互，完善所有组件的文档说明。
课程亮点
完整组件库实战：从零搭建一套包含 14+ 业务组件的 Element Plus 二次封装组件库，覆盖后台管理系统 90% 以上的常用 UI 场景。
Vue3 高级特性深度应用：贯穿 TypeScript 类型定义、组合式 API、动态组件、TSX 渲染函数、自定义 Hooks、defineExpose 等 Vue3 高级特性。
从初级到高级循序渐进：初级篇（菜单/图标选择器/省市区选择器/趋势标记/通知菜单）→ 中级篇（导航菜单/进度条/时间日期选择器/城市选择器）→ 高级篇（表单组件/表格组件），层层递进。
工程化全链路：从 Vite 项目搭建、组件全局注册、按需打包，到 npm 发布、VuePress 文档编写、GitHub/Gitee 预览部署，覆盖组件库全生命周期。
真实项目源码配套：提供完整的 m-element-components 源码，包含所有组件的实现代码、类型定义、样式文件与演示页面。
TSX 无限层级菜单：独家讲解使用 TSX 实现无限层级递归菜单，解决传统 template 难以处理的动态层级问题。
表单与表格双引擎：深度封装配置化表单组件（含上传/富文本/弹出框）与可编辑表格组件（含分页/Loading/自定义插槽），直击后台开发痛点。
课程目录：
element-plus业务组件
+—{1}–第1章课程简介
| [1.1]–1-1导学.mp4
| [1.2]–1-2二次封装的意义.mp4
|
+—{1}–资料
| +—作业
| | 2-13 扩展一个省市区街道四级联动组件.pdf
| | 2-14 扩展一个级联选择框的省市区组件.png
| |
| \—源码
| | m-element-components-master.zip
| |
| \—m-element-components-master
| \—m-element-components
| | .gitignore
| | index.html
| | package.json
| | tsconfig.json
| | vite.config.ts
| | 环境参数.txt
| |
| +—.vscode
| | extensions.json
| | settings.json
| |
| +—public
| | favicon.ico
| |
| \—src
| | App.vue
| | env.d.ts
| | main.ts
| |
| +—assets
| | emoji.png
| | icon-user.png
| | logo.png
| | sousuo.png
| |
| +—components
| | | index.ts
| | |
| | +—calendar
| | | | index.ts
| | | |
| | | \—src
| | | index.vue
| | | types.ts
| | |
| | +—chooseArea
| | | | index.ts
| | | |
| | | +—lib
| | | | pca-code.json
| | | |
| | | \—src
| | | index.vue
| | |
| | +—chooseCity
| | | | index.ts
| | | |
| | | +—lib
| | | | city.ts
| | | | province.json
| | | |
| | | \—src
| | | index.vue
| | | types.ts
| | |
| | +—chooseDate
| | | | index.ts
| | | |
| | | \—src
| | | index.vue
| | |
| | +—chooseIcon
| | | | index.ts
| | | |
| | | \—src
| | | index.vue
| | |
| | +—chooseTime
| | | | index.ts
| | | |
| | | \—src
| | | index.vue
| | |
| | +—container
| | | \—src
| | | | index.vue
| | | |
| | | +—navHeader
| | | | index.vue
| | | |
| | | \—navSide
| | | index.vue
| | |
| | +—form
| | | | index.ts
| | | |
| | | \—src
| | | | index.vue
| | | |
| | | \—types
| | | rule.ts
| | | types.ts
| | |
| | +—list
| | | | index.ts
| | | |
| | | \—src
| | | index.vue
| | | types.ts
| | |
| | +—menu
| | | | index.ts
| | | |
| | | \—src
| | | | index.vue
| | | | menu.tsx
| | | | types.ts
| | | |
| | | \—styles
| | | index.scss
| | |
| | +—modalForm
| | | | index.ts
| | | |
| | | \—src
| | | index.vue
| | |
| | +—notification
| | | | index.ts
| | | |
| | | \—src
| | | index.vue
| | |
| | +—progress
| | | | index.ts
| | | |
| | | \—src
| | | index.vue
| | |
| | +—table
| | | | index.ts
| | | |
| | | \—src
| | | index.vue
| | | types.ts
| | |
| | \—trend
| | | index.ts
| | |
| | \—src
| | index.vue
| |
| +—hooks
| | \—useCopy
| | index.ts
| |
| +—mock
| | index.ts
| |
| +—router
| | index.ts
| |
| +—scripts
| | build.js
| |
| +—styles
| | base.scss
| | ui.scss
| |
| +—utils
| | index.ts
| |
| \—views
| | Home.vue
| |
| +—calendar
| | index.vue
| |
| +—chooseArea
| | index.vue
| |
| +—chooseCity
| | index.vue
| |
| +—chooseIcon
| | index.vue
| |
| +—chooseTime
| | index.vue
| |
| +—form
| | index.vue
| |
| +—menu
| | index.vue
| |
| +—modalForm
| | index.vue
| |
| +—notification
| | data.ts
| | index.vue
| |
| +—progress
| | index.vue
| |
| +—table
| | index.vue
| |
| \—trend
| index.vue
|
+—{2}–第2章封装组件初级篇（上）
| [2.10]–2-10省市区选择组件-巧用watch来达到三级联动效果.mp4
| [2.11]–2-11省市区选择组件-完善省市区联动组件并给父组件分发事件.mp4
| [2.12]–2-12利用app.use特性全局注册组件.mp4
| [2.1]–2-1搭建vite项目并配置路由和element-plus.mp4
| [2.2]–2-2全局注册图标.mp4
| [2.3]–2-3伸缩菜单-完成伸缩菜单基本功能.mp4
| [2.4]–2-4伸缩菜单-抽离头部和侧边栏组件并完善伸缩菜单.mp4
| [2.5]–2-5图标选择器-巧用两次watch控制弹框的显示与隐藏.mp4
| [2.6]–2-6图标选择器-巧用component动态组件显示所有的图标.mp4
| [2.7]–2-7图标选择器-利用命名空间修改dialog样式.mp4
| [2.8]–2-8图标选择器-通过自定义hooks函数实现复制功能.mp4
| [2.9]–2-9省市区选择组件-利用github获取到省市区数据.mp4
|
+—{3}–第3章封装组件初级篇（下）【试看】
| [3.1]–3-1趋势标记-图标的组合使用实现上升下降趋势.mp4
| [3.2]–3-2趋势标记-动态绑定class的妙用实现颜色反转.mp4
| [3.3]–3-3趋势标记-计算属性的妙用实现文字颜色.mp4
| [3.4]–3-4通知菜单-icon和badge组件的组合使用.mp4
| [3.5]–3-5通知菜单-封装一个列表组件(上).mp4
| [3.6]–3-6通知菜单-封装一个列表组件(下).mp4
| [3.7]–3-7通知菜单-完善list组件并融合进通知菜单.mp4
|
+—{4}–第4章封装组件中级篇
| [4.10]–4-10城市选择组件-组合式使用组件完成基本布局.mp4
| [4.11]–4-11城市选择组件-获取城市数据并显示所有城市.mp4
| [4.12]–4-12城市选择组件-绑定事件并实现点击字母跳转到对应区域.mp4
| [4.13]–4-13城市选择组件-完善按省份选择城市.mp4
| [4.14]–4-14城市选择组件-使用filter-method实现搜索过滤.mp4
| [4.1]–4-1导航菜单-导航菜单的需求分析和数据设计.mp4
| [4.2]–4-2导航菜单-巧用template实现两级结构的菜单.mp4
| [4.3]–4-3导航菜单-使用tsx实现无限层级菜单.mp4
| [4.4]–4-4导航菜单-利用封装好的导航菜单组件改造项目整体结构.mp4
| [4.5]–4-5导航菜单-完善细节并增加自定义键名功能.mp4
| [4.6]–4-6进度条-完成进度条动态加载效果.mp4
| [4.7]–4-7时间选择组件-完成时间选择组件的全部功能.mp4
| [4.8]–4-8时间选择组件-完成日期选择组件所有功能.mp4
| [4.9]–4-9时间选择组件-修复日期选择组件结束日期未清空问题.mp4
|
+—{5}–第5章封装组件高级篇（上）
| [5.10]–5-10表单组件-完善表单重置逻辑.mp4
| [5.11]–5-11表单组件-弹出框表单的基本结构.mp4
| [5.12]–5-12表单组件-使用defineExpose获取表单实例方法.mp4
| [5.13]–5-13表单组件-完善表单逻辑.mp4
| [5.14]–5-14表单组件-表单组件总结.mp4
| [5.1]–5-1表单组件-一个强大的表单组件应该具备哪些功能.mp4
| [5.2]–5-2表单组件-使用ts定义表单配置项的数据类型.mp4
| [5.3]–5-3表单组件-使用配置的数据完成一个基本版表单.mp4
| [5.4]–5-4表单组件-巧用component动态组件配置添加子元素组件.mp4
| [5.5]–5-5表单组件-单独处理上传组件-1.mp4
| [5.6]–5-6表单组件-单独处理上传组件-2.mp4
| [5.7]–5-7表单组件-巧用插槽给表单加上操作项.mp4
| [5.8]–5-8表单组件-完善表单上传逻辑.mp4
| [5.9]–5-9表单组件-集成富文本编辑器wangeditor.mp4
|
+—{6}–第6章封装组件高级篇（下）
| [6.10]–6-10表格组件-实现表格分页功能.mp4
| [6.1]–6-1表格组件-一个强大的表格应该具备哪些功能.mp4
| [6.2]–6-2表格组件-使用ts定义表格组件需要的类型.mp4
| [6.3]–6-3表格组件-通过配置的数据完成一个基础版表格.mp4
| [6.4]–6-4表格组件-巧用插槽实现操作项和自定义列数据.mp4
| [6.5]–6-5表格组件-为表格加上loading效果.mp4
| [6.6]–6-6表格组件-实现可编辑单元格功能.mp4
| [6.7]–6-7表格组件-实现可编辑行功能-1.mp4
| [6.8]–6-8表格组件-实现可编辑行功能-2.mp4
| [6.9]–6-9表格组件-修复冒泡事件带来的问题.mp4
|
+—{7}–第7章封装组件拓展篇
| [7.1]–7-1日历组件-element-plus日历组件的不足和为何选择.mp4
| [7.2]–7-2日历组件-使用fullcalendar配置生成日历.mp4
| [7.3]–7-3日历组件-日历的事件渲染和点击事件处理.mp4
| [7.4]–7-4日历组件-自定义渲染日历内容.mp4
| [7.5]–7-5修复组件出现的样式问题.mp4
|
\—{8}–第8章使用vuepress编写组件文档
[8.10]–8-10编写组件库文档的快速上手.mp4
[8.11]–8-11完善组件库所有组件说明（1）.mp4
[8.12]–8-12完善组件库所有组件说明（3）.mp4
[8.13]–8-13完善组件库所有组件说明（4）.mp4
[8.14]–8-14完善组件库所有组件说明（5）.mp4
[8.15]–8-15完善组件库所有组件说明（6）.mp4
[8.16]–8-16完善组件库文档介绍.mp4
[8.1]–8-1实现组件的全量打包.mp4
[8.2]–8-2单独打包每个组件实现按需引入.mp4
[8.3]–8-3发布组件库到npm.mp4
[8.4]–8-4如何更新已经发布的组件库版本.mp4
[8.5]–8-5如何在github部署预览项目.mp4
[8.6]–8-6如何在码云部署预览项目.mp4
[8.7]–8-7组件库文档首页编写.mp4
[8.8]–8-8编写文档网站头部导航和侧边导航.mp4
[8.9]–8-9集成组件库并添加显示和交互.mp4
下载地址：
感谢您的来访，获取更多精彩文章请收藏本站。
