基于Vue3+Vite+TS，二次封装element-plus业务组件|云盘无密-自学it666

来源慕课网
讲师五月的夏天
时长18小时20分钟
官方原价348
最近更新：2021年12月3日

基于Vue3+Vite+TS，二次封装element-plus业务组件|云盘无密

2.99K。

2021-12-03 kuaizixue 已收录已售169次关注2.99K次 您当前为普通用户

43￥优惠信息:免费该资源终身VIP免费去升级

暂无演示 QQ咨询

提取码：提取码在下载按钮旁的灰色按钮上(白色字符)，点击复制即可。

本站所有资源均为网盘链接，MP4格式直接保存到网盘播放即可！超清原画，完整无密，包括所有视频，课件，以及源码，官方同步体验！会员全站资源免费，包括后续上传的所有资源，长期学习建议开通会员！点击前往开通会员VIP

基于Vue3+Vite+TS，二次封装element-plus业务组件|云盘无密

基于vue3+Vite+TS，二次封装element-plus业务组件
集成大量实际样例，系统掌握前沿技术栈与二次组件库封装能力

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

适合人群
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

试看链接：https://pan.baidu.com/s/1mN77VfPtE3aCmRJR5BOsMg?pwd=sh4z

章节目录：

第1章课程简介试看2 节 | 24分钟

本章节简单介绍课程最终效果，技术选型，学习目标及学习收获。

收起列表

视频：

1-1 导学 (17:58)

试看

视频：

1-2 二次封装的意义 (05:36)

第2章封装组件初级篇（上）试看14 节 | 115分钟

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

收起列表

视频：

2-1 搭建vite项目并配置路由和element-plus (09:17)

视频：

2-2 全局注册图标 (07:43)

视频：

2-3 伸缩菜单-完成伸缩菜单基本功能 (10:55)

试看

视频：

2-4 伸缩菜单-抽离头部和侧边栏组件并完善伸缩菜单 (08:22)

试看

视频：

2-5 图标选择器-巧用两次watch控制弹框的显示与隐藏 (16:55)

视频：

2-6 图标选择器-巧用component动态组件显示所有的图标 (09:47)

视频：

2-7 图标选择器-利用命名空间修改dialog样式 (07:41)

视频：

2-8 图标选择器-通过自定义 hooks 函数实现复制功能 (06:52)

视频：

2-9 省市区选择组件-利用 github 获取到省市区数据 (09:39)

视频：

2-10 省市区选择组件-巧用 watch 来达到三级联动效果 (11:26)

视频：

2-11 省市区选择组件-完善省市区联动组件并给父组件分发事件 (09:51)

视频：

2-12 利用app.use特性全局注册组件 (06:02)

作业：

2-13 扩展一个省市区街道四级联动组件

作业：

2-14 扩展一个级联选择框的省市区组件

第3章封装组件初级篇（下）7 节 | 91分钟

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

收起列表

视频：

3-1 趋势标记-图标的组合使用实现上升下降趋势 (14:27)

视频：

3-2 趋势标记-动态绑定class的妙用实现颜色反转 (09:17)

视频：

3-3 趋势标记-计算属性的妙用实现文字颜色 (09:46)

视频：

3-4 通知菜单-icon和badge组件的组合使用 (10:22)

视频：

3-5 通知菜单-封装一个列表组件(上) (13:42)

视频：

3-6 通知菜单-封装一个列表组件(下) (27:26)

视频：

3-7 通知菜单-完善list组件并融合进通知菜单 (05:45)

第4章封装组件中级篇14 节 | 206分钟

本章节会通过四个复杂组件来深入组件封装的技巧和思想，当遇到复杂需求时，如何利用现有组件实现更多功能。

收起列表

视频：

4-1 导航菜单-导航菜单的需求分析和数据设计 (11:12)

视频：

4-2 导航菜单-巧用 template 实现两级结构的菜单 (11:41)

视频：

4-3 导航菜单-使用 tsx 实现无限层级菜单 (17:35)

视频：

4-4 导航菜单-利用封装好的导航菜单组件改造项目整体结构 (07:49)

视频：

4-5 导航菜单-完善细节并增加自定义键名功能 (11:24)

视频：

4-6 进度条-完成进度条动态加载效果 (13:04)

视频：

4-7 时间选择组件-完成时间选择组件的全部功能 (19:16)

视频：

4-8 时间选择组件-完成日期选择组件所有功能 (17:10)

视频：

4-9 时间选择组件-修复日期选择组件结束日期未清空问题 (01:29)

视频：

4-10 城市选择组件-组合式使用组件完成基本布局 (21:49)

视频：

4-11 城市选择组件-获取城市数据并显示所有城市 (15:43)

视频：

4-12 城市选择组件-绑定事件并实现点击字母跳转到对应区域 (12:04)

视频：

4-13 城市选择组件-完善按省份选择城市 (23:04)

视频：

4-14 城市选择组件-使用 filter-method 实现搜索过滤 (21:53)

第5章封装组件高级篇（上）14 节 | 177分钟

本章节将对表单，这个在平时业务当中用的最多并且最重要的两个组件进行二次封装，也是本次课程难度最大，课程中将展现更多组件封装技巧，特别是对复杂组件的处理。

收起列表

视频：

5-1 表单组件-一个强大的表单组件应该具备哪些功能 (09:58)

视频：

5-2 表单组件-使用ts定义表单配置项的数据类型 (12:27)

视频：

5-3 表单组件-使用配置的数据完成一个基本版表单 (18:09)

视频：

5-4 表单组件-巧用component动态组件配置添加子元素组件 (19:43)

视频：

5-5 表单组件-单独处理上传组件-1 (19:10)

视频：

5-6 表单组件-单独处理上传组件-2 (14:46)

视频：

5-7 表单组件-巧用插槽给表单加上操作项 (14:39)

视频：

5-8 表单组件-完善表单上传逻辑 (06:46)

视频：

5-9 表单组件-集成富文本编辑器 wangeditor (13:34)

视频：

5-10 表单组件-完善表单重置逻辑 (08:12)

视频：

5-11 表单组件-弹出框表单的基本结构 (11:08)

视频：

5-12 表单组件-使用defineExpose获取表单实例方法 (15:26)

视频：

5-13 表单组件-完善表单逻辑 (08:37)

视频：

5-14 表单组件-表单组件总结 (03:44)

第6章封装组件高级篇（下）10 节 | 118分钟

本章节将对表格，这个在平时业务当中用的最多并且最重要的两个组件进行二次封装，课程中将展现更多组件封装技巧，特别是对复杂组件的处理。

收起列表

视频：

6-1 表格组件-一个强大的表格应该具备哪些功能 (06:30)

视频：

6-2 表格组件-使用 ts 定义表格组件需要的类型 (05:51)

视频：

6-3 表格组件-通过配置的数据完成一个基础版表格 (05:59)

视频：

6-4 表格组件-巧用插槽实现操作项和自定义列数据 (15:28)

视频：

6-5 表格组件-为表格加上loading效果 (09:18)

视频：

6-6 表格组件-实现可编辑单元格功能 (29:11)

视频：

6-7 表格组件-实现可编辑行功能-1 (12:24)

视频：

6-8 表格组件-实现可编辑行功能-2 (09:48)

视频：

6-9 表格组件-修复冒泡事件带来的问题 (03:49)

视频：

6-10 表格组件-实现表格分页功能 (19:17)

第7章封装组件拓展篇5 节 | 49分钟

本章节将会选择fullcalendar作为日历基础组件，将fullcalendar封装成一个高拓展性的日历组件。

收起列表

视频：

7-1 日历组件-element-plus日历组件的不足和为何选择fullcalendar来二次封装 (06:29)

视频：

7-2 日历组件-使用fullcalendar配置生成日历 (10:21)

视频：

7-3 日历组件-日历的事件渲染和点击事件处理 (16:56)

视频：

7-4 日历组件-自定义渲染日历内容 (10:12)

视频：

7-5 修复组件出现的样式问题 (04:03)

第8章使用vuepress 编写组件文档16 节 | 214分钟

本章节将会使用vuepress来为组件库编写组件文档。

收起列表

视频：

8-1 实现组件的全量打包 (13:08)

视频：

8-2 单独打包每个组件实现按需引入 (14:46)

视频：

8-3 发布组件库到 npm (16:03)

视频：

8-4 如何更新已经发布的组件库版本 (08:02)

视频：

8-5 如何在 github 部署预览项目 (09:54)

视频：

8-6 如何在码云部署预览项目 (08:34)

视频：

8-7 组件库文档首页编写 (07:59)

视频：

8-8 编写文档网站头部导航和侧边导航 (14:23)

视频：

8-9 集成组件库并添加显示和交互 (10:42)

视频：

8-10 编写组件库文档的快速上手 (11:27)

视频：

8-11 完善组件库所有组件说明（1） (14:47)

视频：

8-12 完善组件库所有组件说明（3） (21:21)

视频：

8-13 完善组件库所有组件说明（4） (07:27)

视频：

8-14 完善组件库所有组件说明（5） (24:38)

视频：

8-15 完善组件库所有组件说明（6） (26:13)

视频：

8-16 完善组件库文档介绍 (03:47)

本课程已完结