[551] 基于Vue3+Vite+TS，二次封装element-plus业务组件 - 带你自行扩展已有组件更多功能，从零封装定制业务组件，开启前端进阶之路！

网盘链接：

1. 课程简介

• 1-1 导学
• 1-2 二次封装的意义

2. 封装组件初级篇（上）

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

3. 封装组件初级篇（下）

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

4. 封装组件中级篇

• 4-1 本章概述
• 4-2 导航菜单-导航菜单的需求分析和数据设计
• 4-3 导航菜单-巧用 template 实现两级结构的菜单
• 4-4 导航菜单-使用 tsx 实现无限层级菜单
• 4-5 导航菜单-利用封装好的导航菜单组件改造项目整体结构
• 4-6 导航菜单-完善细节并增加自定义键名功能
• 4-7 给导航菜单加上事件
• 4-8 进度条-完成进度条动态加载效果
• 4-9 给进度条组件加上进度完成事件
• 4-10 时间选择组件-完成时间选择组件的全部功能
• 4-11 时间选择组件-完成日期选择组件所有功能
• 4-12 时间选择组件-修复日期选择组件结束日期未清空问题
• 4-13 城市选择组件-组合式使用组件完成基本布局
• 4-14 城市选择组件-获取城市数据并显示所有城市
• 4-15 城市选择组件-绑定事件并实现点击字母跳转到对应区域
• 4-16 城市选择组件-完善按省份选择城市
• 4-17 城市选择组件-使用 filter-method 实现搜索过滤
• 4-18 本章回顾

5. 封装组件高级篇（上）

• 5-1 本章概述
• 5-2 表单组件-一个强大的表单组件应该具备哪些功能
• 5-3 表单组件-使用ts定义表单配置项的数据类型
• 5-4 表单组件-使用配置的数据完成一个基本版表单
• 5-5 表单组件-巧用component动态组件配置添加子元素组件
• 5-6 表单组件-单独处理上传组件-1
• 5-7 表单组件-单独处理上传组件-2
• 5-8 表单组件-巧用插槽给表单加上操作项
• 5-9 表单组件-完善表单上传逻辑
• 5-10 表单组件-集成富文本编辑器 wangeditor
• 5-11 表单组件-完善表单重置逻辑
• 5-12 表单组件-弹出框表单的基本结构
• 5-13 表单组件-使用defineExpose获取表单实例方法
• 5-14 表单组件-完善表单逻辑
• 5-15 表单组件-表单组件总结
• 5-16 拓展动态添加和删除表单
• 5-17 为表单增加自定义验证规则
• 5-18 为表单增加剩余实例方法
• 5-19 本章回顾

6. 封装组件高级篇（下）

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

7. 封装组件拓展篇

• 7-1 本章概述
• 7-2 日历组件-element-plus日历组件的不足和为何选择fullcalendar来二次封装
• 7-3 日历组件-使用fullcalendar配置生成日历
• 7-4 日历组件-日历的事件渲染和点击事件处理
• 7-5 日历组件-自定义渲染日历内容
• 7-6 修复组件出现的样式问题
• 7-7 将日历语言改成英文显示
• 7-8 日历自定义渲染内容使开始时间和结束时间字体都变成红色

8. 使用vuepress 编写组件文档

• 8-1 本章概述
• 8-2 实现组件的全量打包
• 8-3 单独打包每个组件实现按需引入
• 8-4 发布组件库到 npm
• 8-5 如何更新已经发布的组件库版本
• 8-6 如何在 github 部署预览项目
• 8-7 如何在码云部署预览项目
• 8-8 组件库文档首页编写
• 8-9 编写文档网站头部导航和侧边导航
• 8-10 集成组件库并添加显示和交互
• 8-11 编写组件库文档的快速上手
• 8-12 完善组件库所有组件说明（1）
• 8-13 完善组件库所有组件说明（2）
• 8-14 完善组件库所有组件说明（3）
• 8-15 完善组件库所有组件说明（4）
• 8-16 完善组件库所有组件说明（5）
• 8-17 完善组件库所有组件说明（6）
• 8-18 完善组件库文档介绍
• 8-19 给文档增加自己github和码云仓库地址
• 8-20 给文档增加自定义logo
• 8-21 本章回顾
• 8-22 组件库打包问题处理方案