Vue3.0+TS打造企业级组件库 前端中高级开发者必修课 打造高级轮子+核心源码剖析+项目开发全流程
内容简介
从0开始构建一个高质量的开源表单生成器,实现团队开发效率的倍增。结合Vue3.0的源码,带你真正理解Vue3的开发与应用,实现前端技术水平的快速进阶,快速掌握Vue3.0在企业中实际应用的同学。
官方目录
第1章 关于这门课,你需要知道的 试看
本章中,将向大家介绍本门课的相关信息,包括你能学到的知识概览、最终项目效果、课程讲解方式以及相关储备知识介绍等等。
共 4 节 (42分钟) 展开列表
第2章 [项目启动]项目的创建以及各个技术部件介绍 试看
本章中,我们来创建项目的主题工程。基础设施决定整个项目将来是否合理,所以在最开始需要尽可能将会用到的功能考虑进去,在这里我们会确定项目的配置,vue3的开发模式,ts的使用方式等。
共 9 节 (132分钟) 展开列表
第3章 [准备基础]JsonSchema标准和使用方式介绍
这里介绍什么是json schema,她的功能是什么,在什么场景进行使用等。我们会讲解基本的字段和语义,以及如何进行校验等。
共 6 节 (59分钟) 展开列表
第4章 [基础功能开发]实现组件库的主流程
我们需要根据json schema来生成表单,那么肯定需要依赖一些规则,json schema的语义就是最简单的规则。根据type的定义来进行不同的渲染方式就是最简单的方式,我们称之为renderer,在这一章中我们会实现这些一些简单类型的renderer。…
共 7 节 (89分钟) 展开列表
第5章 [挑战难度]复合型的复杂节点渲染实现
在json schema中有一些类型我们称之为复合类型,他们相对于上一章的节点来说比较复杂,比如对象节点可以里面有很多的string节点和number节点,那么这类节点的渲染方式肯定会更有难度和挑战性。
共 8 节 (131分钟) 展开列表
第6章 [提升质量]为组件提供单元测试
作为一个组件库,是可能被很多人用在他们自己的项目中的,那么质量和稳定性就是这个组件库是否好用的标准。单元测试的完整性是保证组件质量最高效合理的方法,所以这一章我们会为我们的项目加入单元测试的支持,并且使用vue标配的测试库vue-test-utils来帮助我们方便得测试组件。…
共 9 节 (138分钟) 展开列表
第7章 [扩展视野]设计一个主题系统来满足各种不同的需求
这一章中我们设计一套主题系统,为什么需要设计主题呢?因为对于不同的用户来说,他们可能希望表单的最终展现形式是不一样的。但是核心的表单规则和校验是可以通用的,我们把不同的部分拆分出来,通过实现主题就可以实现不同的展现啦。…
共 9 节 (111分钟) 展开列表
第8章 [深入原理]vue3响应式原理逐行源码解析
本章中会再次深度分析vue setup方法涉及到的API和使用方法,并总结一套vue setup的最佳实践。因为setup是vue3最大的更新亮点,也是最能体现vue3和vue2差别的部分,可以说未来大部分的vue开发都会使用setup,所以这是极其重要的一部分,非常有必要单独拿出一章来进行深度分析。…
共 10 节 (168分钟) 展开列表
第9章 [保障安全]表单校验功能开发
表单表单,怎么能缺少表单校验呢?可以说我们之所以讲解表单组件,并把上面的组件归类为表单组件,最大的一个原因就是我们需要对这些组件的交互结果进行校验,所以自古以来,组件库对于表单校验功能的要求都是空前高的。在课程中我们会实现一套完整的表单校验功能,甚至不必开源组件诸如element-ui之类的差,这简直可以成为…
共 9 节 (120分钟) 展开列表
第10章 [深度扩展]完善表单组件库功能
对于表单,一些常用的组件可以实现80%的功能,但是一些不那么通用的功能我们还是需要进行一些自定义的。在我们系统中,通过定义表单项接入的接口形式来规定表单组件的接入方式。
共 5 节 (65分钟) 展开列表
第11章 [我在开源社区等你]开源项目发布流程以及课程总结
组件库如何打包发布,让更多的人认识它并爱上他?在这章中会向你一一介绍。相信学完这门课并且能够自主完成作业的同学,你已经比60%的vue开发者要强大了!加油~~
共 7 节 (75分钟) 展开列表
资源目录
-代码开始-
/020-466-Vue3.0+TS打造企业级组件库 前端中高级开发者必修课(完结) [9.6G]
第10章 [深度扩展]完善表单组件库功能 [787.4M]
10-1 关于自定义组件的功能介绍.mp4 [121.8M]
10-2 使用widget字段实现自定义渲染.mp4 [108.1M]
10-3 uiSchema更多的使用场景扩展.mp4 [71.5M]
10-4 实现自定义format的自定义渲染.mp4 [266M]
10-5 关自定义keyword来扩张功能实现.mp4 [220.1M]
第11章 [我在开源社区等你]开源项目发布流程以及课程总结 [717.1M]
11-1 关于自动化构建相关的知识介绍.mp4 [67.8M]
11-2 创建github仓库以及配置自动化构建.mp4 [134.8M]
11-3 调整单元测试和命令.mp4 [117.9M]
11-4 上传覆盖率数据道codecov.mp4 [64.7M]
11-5 发布类库到npm.mp4 [70.7M]
11-6 课程总结(上).mp4 [109.6M]
11-7 课程总结(下).mp4 [151.6M]
第1章 关于这门课,你需要知道的 [192.4M]
1-1 课前须知,这里有你需要了解的一切 .mp4 [42.4M]
1-2 开始学习之前你需要了解的.mp4 [17.6M]
1-3 Vue3更新概览 .mp4 [113.4M]
1-4 关于TS的学习 .mp4 [19M]
第2章 [项目启动]项目的创建以及各个技术部件介绍 [771.9M]
2-1 创建vue3的项目和目录结构讲解 .mp4 [126M]
2-2 代码格式化工具prettier .mp4 [52M]
2-3 如何用ts在vue3中定义组件 .mp4 [132.8M]
2-4 如何提取props定义.mp4 [41.8M]
2-5 于vue的h函数详细讲解.mp4 [93.8M]
2-6 setup的运用和其意义 .mp4 [123M]
2-7 setup返回render函数的用法.mp4 [61.4M]
2-8 使用jsx开发vue3组件.mp4 [122.1M]
2-9 为什么vscode没有对props类型进行提醒 .mp4 [19.1M]
第3章 [准备基础]JsonSchema标准和使用方式介绍 [342.3M]
3-1 什么是json-schema.mp4 [66.4M]
3-2 如何试用ajv来定义和校验json-schema.mp4 [76.1M]
3-3 json-schema的fomart和自定义format.mp4 [46.4M]
3-4 如何自定义关键字.mp4 [88.8M]
3-5 如何转换错误语言自定义关键字如何自定义错误信息.mp4 [31.2M]
3-6 如何自定义错误信息.mp4 [33.3M]
第4章 [基础功能开发]实现组件库的主流程 [514.2M]
4-1 课程目标和接口定义.mp4 [74.3M]
4-2 实现demo项目.mp4 [91.8M]
4-3 展示项目的APP完善.mp4 [36.1M]
4-4 开始实现SchemaForm.mp4 [81.3M]
4-5 组件SchemaItem的实现.mp4 [57.3M]
4-6 使用SFC的setup语法开发StringField组件.mp4 [108.6M]
4-7 NumberField节点渲染的实现.mp4 [64.8M]
第5章 [挑战难度]复合型的复杂节点渲染实现 [679.6M]
5-1 复杂节点的渲染章节介绍和准备.mp4 [81.8M]
5-2 开始实现ObjectField渲染并处理循环依赖的问题.mp4 [101.1M]
5-3 使用provide跨层级传递信息以及provide源码解析.mp4 [113.7M]
5-4 完成ObjectField的渲染.mp4 [114M]
5-5 数据节点的渲染设计.mp4 [67.3M]
5-6 固定长度数组的渲染.mp4 [53M]
5-7 单类型数组的渲染.mp4 [148.6M]
第6章 [提升质量]为组件提供单元测试 [1.2G]
6-1 什么是单元测试以及为什嘛要单元测试.mp4 [10.3M]
6-2 如何部署jest单元测试.mp4 [168.9M]
6-3 如何使用jest写测试用例.mp4 [216.7M]
6-4 如何使用vue-test-utils测试vue3的组件.mp4 [156.7M]
6-5 正式开始单元测试之问题解决.mp4 [155.6M]
6-6 正式开始单元测试补全.mp4 [63.5M]
6-7 单元测试的指标讲解.mp4 [71.8M]
6-8 ObjectField的单元测试完善.mp4 [203.8M]
6-9 ArrayField的单元测试补全.mp4 [167.9M]
第7章 [扩展视野]设计一个主题系统来满足各种不同的需求 [1.1G]
7-1 为什么需要主题系统.mp4 [12M]
7-2 拆分主题的代码打包.mp4 [143.4M]
7-3 拆分主题并进行定义.mp4 [192.2M]
7-4 使用ThemeProvider进行解耦.mp4 [190.3M]
7-5 解决TS的定义问题.mp4 [176.9M]
7-6 修复单元测试.mp4 [122.8M]
7-7 迁移TextWidget和mergeProps.mp4 [127.7M]
7-8 Controlled-Input功能的实现.mp4 [87.3M]
7-9 迁移NumberWidget.mp4 [58.5M]
第8章 [深入原理]vue3响应式原理逐行源码解析 [2.1G]
8-1 reactive函数源码解析.mp4 [226.1M]
8-10 关于vue3的调度scheduler的源码解析.mp4 [230.4M]
8-2 proxy的handler源码详解.mp4 [231.7M]
8-3 proxy的set和其他代理详解.mp4 [146.1M]
8-4 集合类型的代理函数详解.mp4 [211.2M]
8-5 ref和computed源码详解.mp4 [168.1M]
8-6 整体过一遍watchEffect的API实现.mp4 [296.5M]
8-7 最重要的effect源码深度逐行解析(上).mp4 [243.8M]
8-8 最重要的effect源码深度逐行解析(下).mp4 [190.8M]
8-9 关于effect理解的一些补充.mp4 [189.3M]
第9章 [保障安全]表单校验功能开发 [1.3G]
9-1 关于本章以及jsonschema的错误对象解析.mp4 [51.5M]
9-2 从父组件调用子组件在setup中声明的方法.mp4 [167.3M]
9-3 实现ajv的校验过程.mp4 [95.9M]
9-4 转换错误信息到errorSchema.mp4 [215.4M]
9-5 把错误信息向下传递.mp4 [115.9M]
9-6 实现FormItem组件来展示label和错误信息.mp4 [138.3M]
9-7 通过高阶组件抽离FormItem逻辑.mp4 [144M]
9-8 实现自定义校验的功能.mp4 [201.9M]
9-9 异步校验的实现.mp4 [208.4M]
vue3-jsonschema-form.zip [161.4K]
-代码结束-