爲公司架構一套高質量的 Vue UI 組件庫

有沒有曾遇過，產品要咱們實現一個功能，可是 iview 或者 elementui 不支持，咱們而後義正言辭的說，很差意思，組件庫不支持，無法作到。 有沒有曾和設計師爭論得面紅耳赤，其實也是由於組件庫暫不支持。因此，我認爲每個前端都應該具有能爲公司架構一套 UI 組件庫的能力。

由於機緣巧合，我在 Github 上發起了一次 Vue UI 組件庫開源項目的活動，參與人數達到 40 多人，本覺得一套 UI 庫就是一堆組件疊加在而已，40 我的，每人一個組件，應該會很快搞定吧。萬萬沒想到，一套UI庫會有那麼多內容，咱們幾十我的，研究探索好幾個月，爬過無數坑，項目才慢慢走上正規，估計下個迭代就能夠和你們見面了。

也正由於UI庫對公司如此重要，可是開發過程又並不簡單，因此我以爲個人這個寶貴經驗能夠幫助到你們。接下來我能夠和你們分享一下我作整個開源項目的思路。

咱們這套開源項目主要分爲兩點，第一是項目徹底以模擬企業流程開發；第二是用一套前端工業化知識來完成項目的。

第一徹底以模擬企業流程開發，內容以下：

一、tapd 敏捷管理工具，咱們會按照真實企業，在 tapd 上建立迭代，寫需求，分配任務。

二、代碼倉庫工具選擇 github，操做 git 工具使用企業中最經常使用的 sourceTree

三、我會安排架構師、技術經理、產品、設計師、測試等角色，讓參與者徹底體驗正規流程

四、我會模擬各類真實會議，需求評審會、每日站會、代碼評審會、測試用例評審會、以及各類技術分享會。

五、我會模擬迭代的提測、上線等流程，來保證項目質量。

六、我積極鼓勵參與者選擇多種角色來進行項目實戰，例如參與者除了開發工做，也能夠選擇嘗試技術經理，或者架構師等角色，咱們這邊工做人員都會輔助參與者扮演好角色。讓參與者能學到更多東西。

七、我但願用最規範的企業流程來管理開源項目。

第二是用一套前端工業化知識，內容以下：

一、一套好的項目編寫思路，讓你明白先寫什麼，後寫什麼。例如咱們應該先定義 css 架構，若是不先作這步，會有不少坑。

二、分支管理策略。咱們項目多是好幾十我的參與，怎麼樣的分支策略，能讓代碼衝突最小化，幾乎不出現任何問題呢。

三、如何打造一套 css 架構。

四、一套讓全員代碼風格、規範統一的策略。經過 eslint 配合 git 自動化檢測代碼，保證全員風格統一。

五、打造一套 scripts 前端工做流，經過命令生成統一組件、 自動更新組件引入、打包發佈等。

六、站在設計模式的角度，架構和優化組件庫，保證代碼質量。

七、對代碼進行單元測試。單元測試並非調用幾個 api 而已，而是告訴你單測到底測什麼，測哪些，怎麼測，才能保證代碼低 bug。

八、如何在沒有設計師支持的狀況下，前端如何爲 UI 組件庫製做一套字體圖標。

九、經過項目思路、設計模式、css 架構、scripts 工做流、單元測試、分支策略、eslint 策略等一套標準前端工業化體系知識來構建這套 UI 庫。

若是以上都懂的高手，請略過。若是對怎樣編寫一套 UI 組件庫的具體細節感興趣的朋友，能夠加我微信：fcsboy。