基于Vue3+Vite+TS,二次封装element-plus业务组件

集成大量实际样例,系统掌握前沿技术栈与二次组件库封装能力

基于Vue3+Vite+TS,二次封装element-plus业务组件基于Vue3+Vite+TS,二次封装element-plus业务组件基于Vue3+Vite+TS,二次封装element-plus业务组件基于Vue3+Vite+TS,二次封装element-plus业务组件

很多前端开发者只会调用组件库已有组件,在面对需要定制的场景,或者想要简化使用组件的时候,就会无从下手。本课程深度结合前沿技术栈Vue++,全方位讲解二次封装的思想、技巧、组件设计等,并提供了大量封装实例,帮大家掌握组件的二次封装,实现前端进阶!

课程目标

一门市面难找的组件封装实战课程,带你轻松玩转

带你自行扩展已有组件更多功能,从零封装定制业务组件,开启前端进阶之路!

收获大量组件定制的实例, 独立封装组件
了解:业务真实应用场景
掌握:组件封装全方位技术点
实战:利用现有组件库拓展与定制
思路:复杂组件的设计思路与技巧

实战掌握Vue主流技术栈, 提升技术水准
:最新setup script语法
Vite2: 当下主流的构建工具
Typescript:静态类型检查,当下大势所趋
: Vue生态流行组件库

课程亮点

难度上循序渐进,没有封装经验一样看懂
案例更贴合实际,具体业务可直接复用

攻克主流技术点,系统掌握二次组件封装的设计思路和技巧

课程目录

第1章 课程简介 2节
本章节简单介绍课程最终效果,技术选型,学习目标及学习收获。
视频:1-1 导学
视频:1-2 二次封装的意义

第2章 封装组件初级篇(上)16节
本章节会实现一些基础功能组件,意在讲解封装组件的技巧和组件设计思想,包括如何定义视图,定义数据和定义事件,为后续难度升级做好准备。

图文: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章 封装组件初级篇(下)11节
本章节会实现一些基础功能组件,意在讲解封装组件的技巧和组件设计思想,包括如何定义视图,定义数据和定义事件,为后续难度升级做好准备。

图文: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章 封装组件中级篇18节
本章节会通过四个复杂组件来深入组件封装的技巧和思想,当遇到复杂需求时,如何利用现有组件实现更多功能。

图文: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章 封装组件高级篇(上)19节
本章节将对表单,这个在平时业务当中用的最多并且最重要的两个组件进行二次封装,也是本次课程难度最大,课程中将展现更多组件封装技巧,特别是对复杂组件的处理。

图文: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章 封装组件高级篇(下)15节
本章节将对表格,这个在平时业务当中用的最多并且最重要的两个组件进行二次封装,课程中将展现更多组件封装技巧,特别是对复杂组件的处理。

图文: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章 封装组件拓展篇8节
本章节将会选择fullcalendar作为日历基础组件,将fullcalendar封装成一个高拓展性的日历组件。

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



第8章 使用vuepress 编写组件文档22节


本章节将会使用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 组件库打包问题处理方案

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件、阿里云盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源