📚 课程介绍
本课程深入讲解Vue3.0框架结合TypeScript,从原理到实践,教你如何打造企业级组件库,适合前端中高级开发者。
📋 学习前提
1. HTML/CSS基础(网页结构和样式语言) 2. JavaScript基础(网页交互编程语言) 3. Vue.js框架基础 4. TypeScript基础(一种静态类型语言,用于增强JavaScript)
📖 课程目录
第1章 关于这门课,你需要知道的
1-1 课前须知,这里有你需要了解的一切
1-2 Vue3更新概览
1-3 关于TS的学习
第2章 项目启动
2-1 创建vue3的项目和目录结构讲解
2-2 代码格式化工具prettier
2-3 如何用ts在vue3中定义组件
2-4 如何提取props定义
2-5 于vue的h函数详细讲解
2-6 setup的运用和其意义
2-7 setup返回render函数的用法
2-8 使用jsx开发vue3组件
2-9 为什么vscode没有对props类型进行提醒
第3章 准备基础
3-1 什么是json-schema
3-2 如何试用ajv来定义和校验json-schema
3-3 json-schema的fomart和自定义format
3-4 如何自定义关键字
3-5 如何转换错误语言自定义关键字如何自定义错误信息
3-6 如何自定义错误信息
第4章 基础功能开发
4-1 课程目标和接口定义
4-2 实现demo项目
4-3 展示项目的APP完善
4-4 开始实现SchemaForm
4-5 组件SchemaItem的实现
4-6 使用SFC的setup语法开发StringField组件
4-7 NumberField节点渲染的实现
第5章 挑战难度
5-1 复杂节点的渲染章节介绍和准备
5-2 开始实现ObjectField渲染并处理循环依赖的问题
5-3 使用provide跨层级传递信息以及provide源码解析
5-4 完成ObjectField的渲染
5-5 数据节点的渲染设计
5-6 固定长度数组的渲染
5-7 单类型数组的渲染
5-8 多选数组的渲染
第6章 提升质量
6-1 什么是单元测试以及为什嘛要单元测试
6-2 如何部署jest单元测试
6-3 如何使用jest写测试用例
6-4 如何使用vue-test-utils测试vue3的组件
6-5 正式开始单元测试之问题解决
6-6 正式开始单元测试补全
6-7 单元测试的指标讲解
6-8 ObjectField的单元测试完善
6-9 ArrayField的单元测试补全
第7章 扩展视野
7-1 为什么需要主题系统
7-2 拆分主题的代码打包
7-3 拆分主题并进行定义
7-4 使用ThemeProvider进行解耦
7-5 解决TS的定义问题
7-6 修复单元测试
7-7 迁移TextWidget和mergeProps
7-8 Controlled-Input功能的实现
7-9 迁移NumberWidget
第8章 深入原理
8-1 reactive函数源码解析
8-2 proxy的handler源码详解
8-3 proxy的set和其他代理详解
8-4 集合类型的代理函数详解
8-5 ref和computed源码详解
8-6 整体过一遍watchEffect的API实现
8-7 最重要的effect源码深度逐行解析(上)
8-8 最重要的effect源码深度逐行解析(下)
8-9 关于effect理解的一些补充
8-10 关于vue3的调度scheduler的源码解析
第9章 深度扩展
9-1 关于本章以及jsonschema的错误对象解析
9-2 从父组件调用子组件在setup中声明的方法
9-3 实现ajv的校验过程
9-4 转换错误信息到errorSchema
9-5 把错误信息向下传递
9-6 实现FormItem组件来展示label和错误信息
9-7 通过高阶组件抽离FormItem逻辑
9-8 实现自定义校验的功能
9-9 异步校验的实现
第10章 保障安全
10-1 关于自定义组件的功能介绍
10-2 使用widget字段实现自定义渲染
10-3 uiSchema更多的使用场景扩展
10-4 实现自定义format的自定义渲染
10-5 关自定义keyword来扩张功能实现
第11章 开源项目发布流程以及课程总结
11-1 关于自动化构建相关的知识介绍
11-2 创建github仓库以及配置自动化构建
11-3 调整单元测试和命令
11-4 上传覆盖率数据道codecov
11-5 发布类库到npm
11-6 课程总结(上)
11-7 课程总结(下)
