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

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

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

￥348.00

已完结难度中级时长 18小时20分钟学习人数 446 综合评分 9.13

立即购买加购物车

VUE3组件封装&解决方案

套餐价格：¥725.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-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下载

官方微信

热搜

最近搜索清空

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

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

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

课程预览

一门市面难找的组件封装实战课程，带你轻松玩转elements二次封装！

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

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

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

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

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

相关推荐

邀请好友学习

微信邀请

链接邀请

海报邀请

￥348.00

学习咨询

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