序言

提到element-ui，我想很多前端er應(yīng)該都不陌生，而element-ui也是我第二個(gè)使用的前端UI庫(kù)，第一個(gè)是bootstrap（笑）。我是在去年初學(xué)vue的時(shí)候開(kāi)始接觸elemment-ui的，到現(xiàn)在也快一年了，中間經(jīng)歷了vue3的誕生，想想前端技術(shù)發(fā)展的還真快（笑）。在vue3發(fā)布后，社區(qū)許多前端er還在擔(dān)心element-ui還維護(hù)嗎，這不，全新的element-plus就來(lái)了（你從未體驗(yàn)過(guò)的船新版本）。（笑）

我是在上個(gè)月前開(kāi)始關(guān)注element-plus得，那時(shí)它還只有1.9k star。現(xiàn)在已經(jīng)漲到了5.6k。

那時(shí)我想著給一些開(kāi)源項(xiàng)目做一下貢獻(xiàn)，就開(kāi)始了我的第一個(gè)PR，而element-plus恰好是我的選擇，不知不覺(jué)到現(xiàn)在我已經(jīng)給element-plus提交了6個(gè)PR，其中有2個(gè)水PR（笑）。中間經(jīng)歷了花費(fèi)幾個(gè)小時(shí)來(lái)看懂一部分源碼，打斷點(diǎn)調(diào)試好幾個(gè)小時(shí)最后可能只改動(dòng)了2行代碼等等，不得不說(shuō)這種公司大型項(xiàng)目跟自己在學(xué)校的工作室寫(xiě)的過(guò)家家代碼根本就不是一回事，當(dāng)然我也從中有了許多收獲。下面開(kāi)始正題。

如何提PR

1、fork element-plus 到自己倉(cāng)庫(kù)。

2、git clone https://github.com/{you github name}/element-plus.git

3、npm run bootstrap下載相關(guān)依賴包。

4、這時(shí)就可以開(kāi)始你的改代碼之旅了。而且element-plus項(xiàng)目非常貼心地提供了本地Debug的途徑，你可以在website目錄下的子目錄play中新建一個(gè)index.vue文件，在這里你可以隨意使用各種組件且不必import {component}，然后運(yùn)行npm run website-dev:play就可以在本地查看了，此外運(yùn)行npm run website-dev也可以在本地查看element-plus文檔的官網(wǎng)。最好再將element倉(cāng)庫(kù)也設(shè)置為遠(yuǎn)程倉(cāng)庫(kù)。git remote add upstream https://github.com/element-plus/element-plus.git dev。這樣便于以后更新本地代碼。

5、當(dāng)你修改完代碼后，可以先執(zhí)行npm run lint-fix進(jìn)行eslint檢查和修改。

6、接著執(zhí)行g(shù)it add .儲(chǔ)存。

7、執(zhí)行npm run cz。執(zhí)行這個(gè)命令可以幫助我們生成規(guī)范的commit信息。跟著指令一步一步來(lái)即可。

先選擇commit的類型。

接著輸入是哪個(gè)組件或者文件的修改。

輸入commit簡(jiǎn)短描述

輸入commit長(zhǎng)敘述

選擇是否是破壞性改變。

是否與某個(gè)issue相關(guān)聯(lián)

輸入相關(guān)聯(lián)issue, fix是修復(fù)， re是引用

8、最后推送到自己的倉(cāng)庫(kù)，然后再pull request就可以了，提交PR后，項(xiàng)目的CI還會(huì)進(jìn)行代碼檢查，不過(guò)如果做好上述步驟，基本都會(huì)通過(guò)的。接下來(lái)就等element-plus的成員來(lái)review你的代碼了，通過(guò)就會(huì)被合并了。

記錄我給element-plus的2次pull request

一次我看到這樣一個(gè)issue

其中提到select組件點(diǎn)2次下拉框應(yīng)收回，但事實(shí)卻并沒(méi)有。經(jīng)過(guò)漫長(zhǎng)的debug，我發(fā)現(xiàn)這個(gè)Bug與element-plus內(nèi)部的一個(gè)指令v-click-outside有關(guān)。它加在了select組件中的一個(gè)子組件上，但我發(fā)現(xiàn)應(yīng)加在根div上，故修改如下。

這樣就解決了這個(gè)Bug。

之后，我又看到了這樣一個(gè)issue。色彩選取組件無(wú)法關(guān)閉在點(diǎn)擊2次時(shí)。

仔細(xì)想想，這個(gè)Bug是不是和上面提到的很相似？我的解決方法是加了一個(gè)行內(nèi)塊狀的根div，并將v-click-outside指令改到它的身上，從而解決了Bug。

最后

總的來(lái)說(shuō)，自己給element-plus提的PR大多是修復(fù)Bug的，但還沒(méi)有過(guò)feature PR，其實(shí)是自己太菜了（笑），還是要鞭策自己繼續(xù)努力吧。

總結(jié)

以上是生活随笔為你收集整理的如何从零开始，成为element-plus的contributor的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。