序言

提到element-ui，我想很多前端er應該都不陌生，而element-ui也是我第二個使用的前端UI庫，第一個是bootstrap（笑）。我是在去年初學vue的時候開始接觸elemment-ui的，到現在也快一年了，中間經歷了vue3的誕生，想想前端技術發展的還真快（笑）。在vue3發布后，社區許多前端er還在擔心element-ui還維護嗎，這不，全新的element-plus就來了（你從未體驗過的船新版本）。（笑）

我是在上個月前開始關注element-plus得，那時它還只有1.9k star。現在已經漲到了5.6k。

那時我想著給一些開源項目做一下貢獻，就開始了我的第一個PR，而element-plus恰好是我的選擇，不知不覺到現在我已經給element-plus提交了6個PR，其中有2個水PR（笑）。中間經歷了花費幾個小時來看懂一部分源碼，打斷點調試好幾個小時最后可能只改動了2行代碼等等，不得不說這種公司大型項目跟自己在學校的工作室寫的過家家代碼根本就不是一回事，當然我也從中有了許多收獲。下面開始正題。

如何提PR

1、fork element-plus 到自己倉庫。

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

3、npm run bootstrap下載相關依賴包。

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

5、當你修改完代碼后，可以先執行npm run lint-fix進行eslint檢查和修改。

6、接著執行git add .儲存。

7、執行npm run cz。執行這個命令可以幫助我們生成規范的commit信息。跟著指令一步一步來即可。

先選擇commit的類型。

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

輸入commit簡短描述

輸入commit長敘述

選擇是否是破壞性改變。

是否與某個issue相關聯

輸入相關聯issue, fix是修復， re是引用

8、最后推送到自己的倉庫，然后再pull request就可以了，提交PR后，項目的CI還會進行代碼檢查，不過如果做好上述步驟，基本都會通過的。接下來就等element-plus的成員來review你的代碼了，通過就會被合并了。

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

一次我看到這樣一個issue

其中提到select組件點2次下拉框應收回，但事實卻并沒有。經過漫長的debug，我發現這個Bug與element-plus內部的一個指令v-click-outside有關。它加在了select組件中的一個子組件上，但我發現應加在根div上，故修改如下。

這樣就解決了這個Bug。

之后，我又看到了這樣一個issue。色彩選取組件無法關閉在點擊2次時。

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

最后

總的來說，自己給element-plus提的PR大多是修復Bug的，但還沒有過feature PR，其實是自己太菜了（笑），還是要鞭策自己繼續努力吧。