最近在杨老师的指导下,在观看Young村长和Kagol老师 关于 Dev-UI组件库构建的课程。在此记录一下~
1)B站Young村长-----村长是大佬,所以讲的十分透彻
2)华为Kagol老师-----一个人就是一个团队
3)也可以看下我的gitee仓库丫~~~(求个关注!)
https://gitee.com/shaoxiaohao/component-library-construction
前三节主要介绍了一下前期的准备工作,所以写的比较少~~(主要是我太菜!!!😑)
第一节、写组件库的前期准备以及如何PR
【我要做开源】华为大佬亲授,Vue DevUI开源指南01:提交我的第一次pr_哔哩哔哩_bilibili
【我要做开源】Vue DevUI开源指南01:提交我的第一次pr - 掘金
1.1写组件库的前期思想准备
1、整个项目的框架脚手架需要搞定
2、创建单个组件的脚手架的规范,否则多人开发会导致不同组件参差不齐
3、由于前两步的规范化流程之后,可以直接通过规范在localhost上创建好组件的文档目录
图1:利用脚手架自动生成组件目录
4、组件调试的地方,(一般就是网页)
5、在提交PR的规范也需要规定,这一部分也可以设计到脚手架里。
1.2如何PR
PR:(pull request )提交请求的意思。当你发现了某个开源库的不足,想给作者提意见,就是通过PR来进行的。就是gitee上的这个,看图
图2:gitee上的PR
具体的操作:
1、fork一下到自己的云仓库
2、下载到本地电脑
3、Vscode编辑代码
4、上传到你的云端仓库中(依次到暂存区----本地git-----远程git)
点一下是添加到暂存区,点第二下是是存一些提交信息放到本地git区,最后push才到云端
5、现在去源代码的仓库,点击Pull Request ,这里的意思就是把你已经fork的仓库更改的部分给主库拥有者看,如果库主觉得你的代码对,那他就合并进去,你就是贡献者了~~
第二节、练习:写一个Tree组件
【我要做开源】华为大佬亲授,Vue DevUI开源指南02:做一个有模有样的Tree组件_哔哩哔哩_bilibili
【我要做开源】Vue DevUI开源指南02:实现一个能渲染多层节点的Tree组件 - 掘金
tips: 第一个const A 表示A不能变化,第二个as const 表示A里边的数据---比如data 不能变化
const A = {
data:[1,2]
} as const
第三节、写Tree组件的单元测试
【我要做开源】华为大佬亲授,Vue DevUI开源指南03:学会“单测”才会有安全感!完成Tree组件!_哔哩哔哩_bilibili
【我要做开源】Vue DevUI开源指南03:如何给 tree 组件增加展开/收起功能 - 掘金
单元测试:
每个组件都有一个单元测试的东西,在___test___下的文件件里
图3:组件的单元测试