⚠️ 重要提醒:课程资源里面的所有加微信什么的不要信,上当受骗与本站无关。

📚 课程介绍

本课程将深入讲解如何使用Vue3、Vite和TypeScript技术进行element plus组件的二次封装,包括组件的拓展、高级应用以及组件文档的编写和发布。

📋 学习前提

1. Vue3基础(Vue的基本语法、组件、指令等) 2. JavaScript基础(函数、对象、数组等) 3. TypeScript基础(TypeScript的类型系统、接口、装饰器等) 4. Vite基础(Vite的基本使用和配置)

⭐ 推荐指数

⭐⭐⭐⭐☆ (4/5星)

📖 课程目录

第1章 课程简介

1-1 导学

1-2 二次封装的意义

第2章 封装组件初级篇(上)

2-1 搭建vite项目并配置路由和element-plus

2-2 全局注册图标

2-3 伸缩菜单-完成伸缩菜单基本功能

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

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

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

2-7 图标选择器-利用命名空间修改dialog样式

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

2-9 省市区选择组件-利用github获取到省市区数据

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

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

2-12 利用app.use特性全局注册组件

第3章 封装组件初级篇(下)

3-1 趋势标记-图标的组合使用实现上升下降趋势

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

3-3 趋势标记-计算属性的妙用实现文字颜色

3-4 通知菜单-icon和badge组件的组合使用

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

3-7 通知菜单-完善list组件并融合进通知菜单

第4章 封装组件中级篇

4-1 导航菜单-导航菜单的需求分析和数据设计

4-2 导航菜单-巧用template实现两级结构的菜单

4-3 导航菜单-使用tsx实现无限层级菜单

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

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

4-6 进度条-完成进度条动态加载效果

4-7 时间选择组件-完成时间选择组件的全部功能

4-8 时间选择组件-修复日期选择组件结束日期未清空问题

4-9 时间选择组件-完成日期选择组件所有功能

4-10 城市选择组件-组合式使用组件完成基本布局

4-11 城市选择组件-获取城市数据并显示所有城市

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

4-13 城市选择组件-完善按省份选择城市

4-14 城市选择组件-使用filter-method实现搜索过滤

第5章 封装组件高级篇(上)

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

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

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

5-4 表单组件-巧用component动态组件配置添加子元素组件

5-5 表单组件-单独处理上传组件-1

5-6 表单组件-单独处理上传组件-2

5-7 表单组件-巧用插槽给表单加上操作项

5-8 表单组件-完善表单上传逻辑

5-9 表单组件-集成富文本编辑器wangeditor

5-10 表单组件-完善表单重置逻辑

5-11 表单组件-弹出框表单的基本结构

5-12 表单组件-使用defineExpose获取表单实例方法

5-13 表单组件-完善表单逻辑

第6章 封装组件高级篇(下)

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

6-2 表格组件-使用 ts 定义表格组件需要的类型

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

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

6-5 表格组件-为表格加上loading效果

6-6 表格组件-实现可编辑单元格功能

6-7 表格组件-实现可编辑行功能-1

6-8 表格组件-实现可编辑行功能-2

6-9 表格组件-修复冒泡事件带来的问题

6-10 表格组件-实现表格分页功能

第7章 封装组件拓展篇

7-1 日历组件-element-plus日历组件的不足和为何选择

7-2 日历组件-使用fullcalendar配置生成日历

7-3 日历组件-日历的事件渲染和点击事件处理

7-4 日历组件-自定义渲染日历内容

第8章 使用vuepress编写组件文档

8-1 实现组件的全量打包

8-2 单独打包每个组件实现按需引入

8-3 发布组件库到npm

8-4 如何更新已经发布的组件库版本

8-5 如何在github部署预览项目

8-6 如何在码云部署预览项目

8-7 组件库文档首页编写

8-8 编写文档网站头部导航和侧边导航

8-9 集成组件库并添加显示和交互

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。