从0到1搭建一个组件库-第123节课

最近在杨老师的指导下，在观看Young村长和Kagol老师 关于 Dev-UI组件库构建的课程。在此记录一下~

1）B站Young村长-----村长是大佬，所以讲的十分透彻

Young村长的个人空间_哔哩哔哩_Bilibili

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：组件的单元测试

---