基于Vue3+Vite+TS,二次封装element-plus业务组件
课程目标一门市面稀缺的组件封装实战课程,带你轻松玩转elements二次封装!
带你自行扩展已有组件更多功能,从零封装定制业务组件,开启前端进阶之路!
收获大量组件定制的实例
独立封装组件
了解:业务真实应用场景
掌握:组件封装全方位技术点
实战:利用现有组件库拓展与定制
思路:复杂组件的设计思路与技巧
实战掌握Vue主流技术栈
提升技术水准
Vue3:最新setup script语法
Vite2: 当下最主流的构建工具
Typescript:静态类型检查,当下大势所趋
element-plus: Vue生态最流行组件库
课程亮点
难度上循序渐进,没有封装经验一样看懂
案例更贴合实际,具体业务可直接复用
基础组件
1、伸缩菜单
2、省市区联动组件
3、图标选择器
4、时间选择框联动
5、通知菜单组件
6、趋势标记组件
7、弹框扩展
8、城市选择组件
9、侧边栏组件
较复杂组件
10、无限极的菜单
· 需求分析 · 侧边导航菜单概述
11、进度条组件
· 侧边导航菜单组件编写 · 普通进度条需求分析 · 环形进度条
复杂组件
12、表格组件
· 表格组件需求分析 · 使用ts定义表格配置项数据类型 · 先完成一个基础版表格 · 为表格添上操作栏
· 为表格加上 loading 效果 · 如何自定义表格列数据 · 给表格操作栏添加事件 · 可编辑单元格
· 可编辑行 · 如何给表格做更多扩展
13、表单
· 先完成一个基础版表格 · 给表单配置添加子元素组件 · 单独处理上传组件 · 给表单添加操作项
· 表单集成 wangeditor 富文本编辑器 · 表单如何和弹出框结合 · 先让弹出框显示与隐藏
· 把表单集成进弹出框
14、日历组件
· 分析 element-ui · 安装 fullcalendar 及拓展包 · 添加 toolbar 和 view 拓展
· 使用 dayclick 给日历添加日程 · 使用 eventclick 操作日程 · 使用自定义渲染来渲染 html 内容和事件
· 把日历组件整合成 vue 组件
攻克主流技术点,系统掌握二次组件封装的设计思路和技巧
趋势标记
伸缩菜单
日历
图标选择器
城市选择
导航菜单
表格
进度条
表单
弹框拓展
省市区选择
课程大纲
第1章 课程简介
本章节简单介绍课程最终效果,技术选型,学习目标及学习收获。
第2章封装组件初级篇(上)
本章节会实现一些基础功能组件,意在讲解封装组件的技巧和组件设计思想,包括如何定义视图,定义数据和定义事件,为后续难度升级做好准备。
第3章封装组件初级篇(下)
本章节会实现一些基础功能组件,意在讲解封装组件的技巧和组件设计思想,包括如何定义视图,定义数据和定义事件,为后续难度升级做好准备。
第4章封装组件中级篇
本章节会通过四个复杂组件来深入组件封装的技巧和思想,当遇到复杂需求时,如何利用现有组件实现更多功能。
第5章封装组件高级篇(上)
本章节将对表单,这个在平时业务当中用的最多并且最重要的两个组件进行二次封装,也是本次课程难度最大,课程中将展现更多组件封装技巧,特别是对复杂组件的处理。
查看完整目录
专属服务
每个IT资源网课程,都是一个专业的技术社区
个性化增值服务,学习有保障更高效
答疑专区+技术社区
连百度谷歌都搜不到的问题,在这里讲
师都将耐心详细解答,更有小伙伴一起
交流互动,共同进步。
课程全套代码下载
提供课程全套源代码下载,包含:
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
独家“动态”教辅材料
丰富的专属教辅资料上传更新,通过课程
教案、原理图解、技术文档、演示案例等
各种教材,保障你的学习效果。
实用电子文档
部分简单内容以图文形式呈现,与视频
相配合,既保障学习效果,又提高了学
习效率。
页:
[1]