本课程来自某课网,是一门学习Vue3+Vite+TS的视频教程,本课程深度结合前沿技术栈Vue+Vite+TS,全方位讲解二次封装的思想、技巧、组件设计等,并提供了大量封装实例,让你系统掌握二次组件封装的设计思路和技巧。
适合人群:
1.工作1年以上的 vue 开发者
3. 没有组件封装经验的开发者
2. 想要在 vue 组件进阶的开发者
第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章 封装组件中级篇
本章节会通过四个复杂组件来深入组件封装的技巧和思想,当遇到复杂需求时,如何利用现有组件实现更多功能。
第5章 封装组件高级篇
本章节将对表格和表单,这两个在平时业务当中用的最多并且最重要的两个组件进行二次封装,也是本次课程难度最大,拓展性最高的两个组件,课程中将展现更多组件封装技巧,特别是对复杂组件的处理。
第6章 封装组件拓展篇
本章节将会选择fullcalendar作为日历基础组件,将fullcalendar封装成一个高拓展性的日历组件。
第7章 使用vuepress 编写组件文档
本章节将会使用vuepress来为组件库编写组件文档。
基于Vue3+Vite+TS,二次封装element-plus业务组件视频随机截图: