首页 实战 基于Vue3+Vite+TS,二次封装element-plus业务组件
收藏

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

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

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

优惠到手 328
原价¥348.00
满8700减2600 满5600减1800 满4600减1600 满3800减1200 满2800减900 满1800减500 满1200减300 满500减80 满199减20

更多

已完结 难度 中级 时长 18小时20分钟 学习人数 446 综合评分 9.13
VUE3组件封装&解决方案
套餐价格:¥726.00
2门课 总价:¥806.00
立即购买

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

五月的夏天
讲师

高级技术专家

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
课程目标

一门市面难找的组件封装实战课程,带你轻松玩转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章 封装组件高级篇(上)
本章节将对表单,这个在平时业务当中用的最多并且最重要的两个组件进行二次封装,也是本次课程难度最大,课程中将展现更多组件封装技巧,特别是对复杂组件的处理。
查看完整目录
专属服务

每个慕课网课程,都是一个专业的技术社区

个性化增值服务,学习有保障更高效

答疑专区+技术社区
连百度谷歌都搜不到的问题,在这里讲
师都将耐心详细解答,更有小伙伴一起
交流互动,共同进步。
课程全套代码下载
提供课程全套源代码下载,包含:
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
独家“动态”教辅材料
丰富的专属教辅资料上传更新,通过课程
教案、原理图解、技术文档、演示案例等
各种教材,保障你的学习效果。
实用电子文档
部分简单内容以图文形式呈现,与视频
相配合,既保障学习效果,又提高了学
习效率。
适合人群
1.工作1年以上的 vue 开发者
3. 没有组件封装经验的开发者
2. 想要在 vue 组件进阶的开发者
技术储备
有相关es6、vue2或vue3、ts、element-plus开发经验
环境参数
vue 3.2.16
vue-tsc 0.3.0
vite 2.6.4
typescript 4.4.3
sass-loader 12.2.0
sass 1.43.2
mockjs 1.1.0
wangeditor 4.7.9
vue-router 4.0.12
lodash 4.17.21
element-plus 1.1.0-beta.20
axios 0.24.0
node 16.6.2
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题