搭建Vue3组件库:第十七章 管理组件库的pull request

简介: 本章介绍如何管理你的request pull

一个好的项目很少会由一个人来独立完成。即使你完成了所有功能实现,也需要有人给你 Review 和提建议、找 Bug。比如添加新的组件、完善文档、添加单元测试、提出改进意见。

这节课我们就介绍一下如何参与开源社区的代码贡献。对于任何一个开源项目,我们都是以陌生人的身份参与的。也就是说,你并不是项目组成员,不具备直接提交代码的权限。如果你想参与其中,最好的方式就是提交 PullRequest,等你有一定贡献的话再请求成为项目成员。


什么是 PullRequest?

PullRequst 直译过来就是拉取请求,那么拉取请求和提交代码有什么关系呢。

这里面有一个比喻,我们可以把代码比作一个团队,对于一个陌生人来讲,你很难获取信任,让你直接插手团队的管理。这个时候上帝给了你一次证明的机会,就是复制一个一模一样的团队给你。

你经过一段时间的优化管理后,可以把你的复制团队和原有团队的对比记录发送给原团队的管理者证明你优化的效果,请求将你的改进合并到原团队之中,这种行为就是代码世界的 PullRequest。显然这个世界上并没有上帝,但是代码本身是有可复制性的,可以很轻松地复制一份,这个叫做 fork。你改进后提交的合并请求就叫做 PullRequest,是你的复制分支和原分支的对比记录 + 你对改进的描述。
在这里插入图片描述

假设你要给VUE的组件库提交代码,在 GitHub 中的 PullRequest 步骤如下:

  1. 从VUE组件库 fork 代码仓库到你的仓库;
  2. 从自己仓库 clone 到本地;
  3. git add 添加你修改的代码到暂存区
  4. 提交 commit 你的更改;
  5. Push 到你的的代码仓库;
  6. 给VUE的组件库提交一个 PullRequest (拉取请求),说明你的修改内容,请求该组件作者提交。作者认为属于有价值提交的话,就会点击接受。则 Github 会将这次修改拉取到然叔的项目,这样的话就相当于给然叔组件库提交了一次代码贡献。

简单地说,整个代码贡献过程可以认为是复制 ==> 修改 ==> 提交拉取请求 ==> 接受请求。

一般我们用这里面的关键一步 PullRequest 当做整个代码贡献行为的简称。现在大家就比较清楚为什么说参与开源项目叫提 PR。


Fork 代码

Fork 实际上就是复制的意思。在 Github 中相当于将组件作者 账号中的 项目复制了一份到 自己 账号中。

在这里插入图片描述


在这里插入图片描述

点击 【Create fork】就可以了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C0qzX6wS-1669487626308)()]

新创建的代码在 你自己账号下,这个代码和自己常见的几乎没有差别,只是在界面上多了一点内容:

  • 来源: 表示项目复制得哪个地址;
  • 提交贡献: 这个按钮是 PullRequest 用的;
  • 同步: Sync fork,这是一个新功能,用于将源地址的最新提交拉取回本地址。

Clone 代码到本地

使用Git命令克隆代码

git clone git@github.com:geniusguys/study-ui.git

然后修改你想修改的代码,然后提交代码

在这里插入图片描述

然后在push你的代码在你的远程仓库

在这里插入图片描述

提交代码后,回到自己远程仓库的 Github 页面。这个时候就可以看到这个提交。这是一个新的功能,可以更方便你提交 PullRequest。

在这里插入图片描述

点击 【Contribute】中的 【Open pull request】按钮,就可以创建一个新的 PullRequest 了。

在这里插入图片描述

在 pull request 界面中可以看到提交的方向。这里面表明是从 自己的仓库分支 向 组件作者仓库分支 提交代码。当然这里面方向和分支都可以选择,多分支通常用于你同时要处理很多个 PullRequest 的情况,目前只处理一个分支就没有这么麻烦。

在这里插入图片描述

另外,你也可以从后面的比对中清楚地看到你修改的内容。

在这里插入图片描述

点击 【Create pull request】后,这个pullrequest 就创建成功了。这时组件库作者就收到了你的 pullrequest。


审核代码修改

当有人给组件库提交了代码贡献,其作者就可以很容易地在 【PullRequest】中看到。

在这里插入图片描述

打开后可以查阅代码变更,也可以清楚地看到这个代码 CI 运行的结果。通过这个结果就可以判断代码是否正确,也可以提出一定的改进意见,让你继续进行修改。

在这里插入图片描述

假设认为你的修改是有价值的,就可以批准你的修改。点击 Merge pull request 就可以接受这次代码合并。这时,你的代码也就合并到了 组件库作者的 仓库中了,这次代码贡献宣告胜利结束。

在开源世界中,每个人都是互不相识的。开源世界中的合作也是从陌生人到熟人的过程。有趣的 Github 给我们提供了一种陌生人参与代码贡献的可能,可以通过代码来证明自己、实现自己的价值。

相关文章
|
2月前
|
JavaScript 前端开发 安全
Vue 3
Vue 3以组合式API、Proxy响应式系统和全面TypeScript支持,重构前端开发范式。性能优化与生态协同并进,兼顾易用性与工程化,引领Web开发迈向高效、可维护的新纪元。(238字)
613 139
|
2月前
|
缓存 JavaScript 算法
Vue 3性能优化
Vue 3 通过 Proxy 和编译优化提升性能,但仍需遵循最佳实践。合理使用 v-if、key、computed,避免深度监听,利用懒加载与虚拟列表,结合打包优化,方可充分发挥其性能优势。(239字)
286 1
|
7月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
1037 5
|
3月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
457 11
|
2月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
321 0
|
4月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
511 1
|
4月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
304 0
|
5月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
147 0
|
6月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件的实现代码:支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
本文详细介绍了在 Vue 项目中实现一个功能完善、交互友好的表情包输入组件的方法,并提供了具体的应用实例。组件设计包含表情分类展示、响应式布局、与输入框的交互及样式定制等功能。通过核心技术实现,如将表情插入输入框光标位置和点击外部关闭选择器,确保用户体验流畅。同时探讨了性能优化策略,如懒加载和虚拟滚动,以及扩展性方案,如自定义主题和国际化支持。最终,展示了如何在聊天界面中集成该组件,为用户提供丰富的表情输入体验。
558 8
|
7月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
668 17