Vue3.0+TypeScript打造企业级组件库(完结)

2022-02-23 Web前端 982
IT学习视频
IT学习视频 2022-02-23 22:00:039
所需:10积分
〖课程介绍〗:
        在本课程中,我将带你从0开始构建一个高质量的开源的表单生成器。这个表单生成器也是我们团队中正在用的,对开发效率有着非常明显的提升和帮助(3倍左右)。在这个开发过程中,我还会带你梳理项目开发中的大小问题,踏平项目实际操作中大大小小的坑。结合Vue3.0的源码,带你真正理解Vue3的开发与应用,实现前端技术水平的快速进阶。对于有过一定Vue开发经验,希望可以快速掌握Vue3.0在企业中实际应用的同学,这门课程非常适合你。
. _/ h* e/ }: \
〖课程目录〗:
        第1章 关于这门课,你需要知道的
6 `4 J6 s' A1 D9 c        本章中,将向大家介绍本门课的相关信息,包括你能学到的知识概览、最终项目效果、课程讲解方式以及相关储备知识介绍等等。

1 G2 ?& A7 p9 M% S+ }2 s         1-1 课前须知,这里有你需要了解的一切试看
2 S, R# W& @# g3 M( b% l         1-2 开始学习之前你需要了解的
         1-3 Vue3更新概览
; ?' e( x% l$ X& |( l         1-4 关于TS的学习
        第2章 【项目启动】项目的创建以及各个技术部件介绍
6 w3 _5 ^& t1 Z        本章中,我们来创建项目的主题工程。基础设施决定整个项目将来是否合理,所以在最开始需要尽可能将会用到的功能考虑进去,在这里我们会确定项目的配置,vue3的开发模式,ts的使用方式等。
+ e# Y: T1 j- J6 [. }4 m
         2-1 创建vue3的项目和目录结构讲解
9 G4 x# p8 r# Q4 x( x; E+ U2 l         2-2 代码格式化工具prettier
         2-3 如何用ts在vue3中定义组件试看
         2-4 如何提取props定义
# g( U* h# k9 _$ i         2-5 于vue的h函数详细讲解
         2-6 setup的运用和其意义试看
+ c" p( }; m: B& c1 w2 q3 [4 a         2-7 setup返回render函数的用法
4 N! `/ S' i) _' G# d! i6 j, J         2-8 使用jsx开发vue3组件
         2-9 为什么vscode没有对props类型进行提醒
        第3章 【准备基础】JsonSchema标准和使用方式介绍
8 ?% j# S2 F/ P$ s        这里介绍什么是json schema,她的功能是什么,在什么场景进行使用等。我们会讲解基本的字段和语义,以及如何进行校验等。

9 a. {: y5 \# q. d; Q         3-1 什么是json-schema
  `6 p2 e7 W, w         3-2 如何试用ajv来定义和校验json-schema
! k6 f" a5 [: I         3-3 json-schema的fomart和自定义format
         3-4 如何自定义关键字
$ e9 b* @/ [0 U- w6 E( _/ W0 q         3-5 如何转换错误语言自定义关键字如何自定义错误信息
5 U5 T1 m3 V* a$ a         3-6 如何自定义错误信息
$ G3 x  h8 @( k        第4章 【基础功能开发】实现组件库的主流程
+ q! P! n3 I1 t9 O        我们需要根据json schema来生成表单,那么肯定需要依赖一些规则,json schema的语义就是最简单的规则。根据type的定义来进行不同的渲染方式就是最简单的方式,我们称之为renderer,在这一章中我们会实现这些一些简单类型的renderer。...
4 V2 U2 s$ D2 L: K" `
         4-1 课程目标和接口定义
         4-2 实现demo项目
' o  r. O- [/ J- T4 v; i         4-3 展示项目的APP完善
3 f6 i: J( D1 e         4-4 开始实现SchemaForm
         4-5 组件SchemaItem的实现
         4-6 使用SFC的setup语法开发StringField组件
         4-7 NumberField节点渲染的实现
        第5章 【挑战难度】复合型的复杂节点渲染实现
2 m& x) h4 ^) ^! C6 W. c        在json schema中有一些类型我们称之为复合类型,他们相对于上一章的节点来说比较复杂,比如对象节点可以里面有很多的string节点和number节点,那么这类节点的渲染方式肯定会更有难度和挑战性。

+ c. l( F, |3 Z. a2 V         5-1 复杂节点的渲染章节介绍和准备
         5-2 开始实现ObjectField渲染并处理循环依赖的问题
         5-3 使用provide跨层级传递信息以及provide源码解析
* H! T% Q  c. G# x7 L; m7 a         5-4 完成ObjectField的渲染
         5-5 数据节点的渲染设计
) G0 d9 _2 T: _3 s3 ?; M: B         5-6 固定长度数组的渲染
5 j$ _9 O! e; T  q. U: M         5-7 单类型数组的渲染
         5-8 多选数组的渲染
5 ]+ w. c, M3 ?: I        第6章 【提升质量】为组件提供单元测试
        作为一个组件库,是可能被很多人用在他们自己的项目中的,那么质量和稳定性就是这个组件库是否好用的标准。单元测试的完整性是保证组件质量最高效合理的方法,所以这一章我们会为我们的项目加入单元测试的支持,并且使用vue标配的测试库vue-test-utils来帮助我们方便得测试组件。...

         6-1 什么是单元测试以及为什嘛要单元测试
3 D8 H" x  U; s         6-2 如何部署jest单元测试
         6-3 如何使用jest写测试用例
8 E, f; c2 Z" ~  x         6-4 如何使用vue-test-utils测试vue3的组件
& j) o/ x9 o9 c/ m( A) F         6-5 正式开始单元测试之问题解决
         6-6 正式开始单元测试补全
) \  W' B- [0 q8 |) J  H         6-7 单元测试的指标讲解
         6-8 ObjectField的单元测试完善
" n; J6 Y3 h/ o; d1 X         6-9 ArrayField的单元测试补全
        第7章 【扩展视野】设计一个主题系统来满足各种不同的需求
        这一章中我们设计一套主题系统,为什么需要设计主题呢?因为对于不同的用户来说,他们可能希望表单的最终展现形式是不一样的。但是核心的表单规则和校验是可以通用的,我们把不同的部分拆分出来,通过实现主题就可以实现不同的展现啦。...
8 w, i% j! I: ]
         7-1 为什么需要主题系统
) v6 r/ w' T2 W         7-2 拆分主题的代码打包
         7-3 拆分主题并进行定义
: I3 F/ X  M0 C7 }4 n+ j         7-4 使用ThemeProvider进行解耦
         7-5 解决TS的定义问题
         7-6 修复单元测试
         7-7 迁移TextWidget和mergeProps
; M- w( A: U2 V" X3 {         7-8 Controlled-Input功能的实现
         7-9 迁移NumberWidget
4 q' O" W% r/ @! Y5 w( A        第8章 【深入原理】vue3响应式原理逐行源码解析
* X; I) `( `* S! t5 W8 J6 y        本章中会再次深度分析vue setup方法涉及到的API和使用方法,并总结一套vue setup的最佳实践。因为setup是vue3最大的更新亮点,也是最能体现vue3和vue2差别的部分,可以说未来大部分的vue开发都会使用setup,所以这是极其重要的一部分,非常有必要单独拿出一章来进行深度分析。...

) x# k, o& H* `3 ]         8-1 reactive函数源码解析
         8-2 proxy的handler源码详解
         8-3 proxy的set和其他代理详解
$ L* V  A' b$ M9 N3 b         8-4 集合类型的代理函数详解
         8-5 ref和computed源码详解
4 m6 z, a8 O8 c0 t9 F         8-6 整体过一遍watchEffect的API实现
; t; a9 d+ x" l: i6 _3 U         8-7 最重要的effect源码深度逐行解析(上)
+ y' V* m7 y  D. P8 Z- D         8-8 最重要的effect源码深度逐行解析(下)
% M* S- B6 h8 M* h$ H( |         8-9 关于effect理解的一些补充
         8-10 关于vue3的调度scheduler的源码解析
8 V) _" E4 _7 @5 P        第9章 【深度扩展】各种自定义渲染功能集成开发
        对于表单,一些常用的组件可以实现80%的功能,但是一些不那么通用的功能我们还是需要进行一些自定义的。在我们系统中,将会通过定义表单项接入的接口形式来规定表单组件的接入方式。
8 m  ^4 E1 o( w4 B5 f
: C% p7 U/ y# L0 [. ~! v8 `         9-1 关于本章以及jsonschema的错误对象解析
         9-2 从父组件调用子组件在setup中声明的方法
         9-3 实现ajv的校验过程
         9-4 转换错误信息到errorSchema
( c. N$ a2 Z0 N3 d) T4 F         9-5 把错误信息向下传递
         9-6 实现FormItem组件来展示label和错误信息
! r* z! r' o+ i  A" A, O5 K% w         9-7 通过高阶组件抽离FormItem逻辑
/ d: I5 u8 J. M% Y( {1 q( D         9-8 实现自定义校验的功能
         9-9 异步校验的实现
        第10章 【保障安全】表单校验功能开发
        表单表单,怎么能缺少表单校验呢?可以说我们之所以讲解表单组件,并把上面的组件归类为表单组件,最大的一个原因就是我们需要对这些组件的交互结果进行校验,所以自古以来,组件库对于表单校验功能的要求都是空前高的。在课程中我们会实现一套完整的表单校验功能,甚至不必开源组件诸如element-ui之类的差,这简直可以成为...
* Z4 x6 f. L+ ]1 H. X
         10-1 关于自定义组件的功能介绍
         10-2 使用widget字段实现自定义渲染
# e  b# [+ i: V$ _* o         10-3 uiSchema更多的使用场景扩展
         10-4 实现自定义format的自定义渲染
         10-5 关自定义keyword来扩张功能实现
        第11章 【我在开源社区等你】开源项目发布流程以及课程总结
        组件库如何打包发布,让更多的人认识它并爱上他?在这章中会向你一一介绍。相信学完这门课并且能够自主完成作业的同学,你已经比60%的vue开发者要强大了!加油~~
5 v8 N% Y1 e2 ]8 V/ L
0 ], h9 g( u0 N: T         11-1 关于自动化构建相关的知识介绍
         11-2 创建github仓库以及配置自动化构建
) D$ t' _0 T- c+ \         11-3 调整单元测试和命令
         11-4 上传覆盖率数据道codecov
/ Y, h1 i5 p+ D' O         11-5 发布类库到npm
         11-6 课程总结(上)
7 z) X2 L4 q+ ]  H, M3 `, }7 {         11-7 课程总结(下)
〖视频截图〗:
评论
    热搜排行🔥
    小马哥最新Java分布式架构训练营 - 第二期 589
    人人都能学会数据分析(全) 664
    2023最新从0实现React18视频课程 500
    在线办公系统SpringBoot+Vue3项目实战视频课程 696
    Django快速开发实战(完结) 848
    SpringBoot+Vue 前后端分离在线学习平台-在线教育平台+文档 4213
    大厂云原生架构Docker和k8s视频教程 1147
    Vue3.0+TypeScript打造企业级组件库(完结) 955
    Go进阶训练营(完结) 922
    Java EE在线考试系统-完整版+视频教程 1540
    相似资源🌱
    Vue3.0+TypeScript打造企业级组件库(完结) 911
    Vue3.0(正式版) + TS 仿知乎专栏企业级项目(完结) 920
    Spring Security+OAuth2 精讲 多场景打造企业级认证与授权(完结) 915
    Go开发工程师(18章) 906
    前端必修 CSS架构系统精讲(完结) 323
    新版-Go开发工程师(完结) 610
    移动端架构师(完结) 808
    Spring Boot + Vue3 前后端分离 实战wiki知识库系统(完结) 935
    React17+React Hook+TS4 最佳实践仿 Jira 企业级项目(完结) 237
    玩转N种企业级解决方案,笑傲分布式开发(完结) 947
    取消

    『FORFUTURE RESOURCES. JUST FOR YOU!』

    扫码支持
    ㊟:感谢您的支持🌹,我会继续努力的

    打开支付宝扫一扫,即可进行扫码打赏哦!!

    Powered by JavaCoderForFuture Group™💖

    ForFuture Group