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

admin · 发表于 2022-5-18 00:02:53

课程目标
            一门市面稀缺的组件封装实战课程，带你轻松玩转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资源网课程，都是一个专业的技术社区
                  个性化增值服务，学习有保障更高效



                        答疑专区+技术社区
                        连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。



                        课程全套代码下载
                        提供课程全套源代码下载，包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。





                        独家“动态”教辅材料
                        丰富的专属教辅资料上传更新，通过课程
教案、原理图解、技术文档、演示案例等
各种教材，保障你的学习效果。



                        实用电子文档
                        部分简单内容以图文形式呈现，与视频
相配合，既保障学习效果，又提高了学
习效率。