為公司架構一套高質量的 Vue UI 元件庫
有沒有曾遇過，產品要我們實現一個功能，但是 iview 或者 elementui 不支援，我們然後義正言辭的說，不好意思，元件庫不支援，沒法做到。 有沒有曾和設計師爭論得面紅耳赤，其實也是因為元件庫暫不支援。所以，我認為每一個前端都應該具備能為公司架構一套 UI 元件庫的能力。
因為機緣巧合，我在 Github 上發起了一次 Vue UI 元件庫開源專案的活動，參與人數達到 40 多人，本以為一套 UI 庫就是一堆元件疊加在而已，40 個人，每人一個元件，應該會很快搞定吧。萬萬沒想到，一套UI庫會有那麼多內容，我們幾十個人，研究探索好幾個月，爬過無數坑，專案才慢慢走上正規，估計下個迭代就可以和大家見面了。
也正因為UI庫對公司如此重要，但是開發過程又並不簡單，所以我覺得我的這個寶貴經驗可以幫助到大家。接下來我可以和大家分享一下我做整個開源專案的思路。
我們這套開源專案主要分為兩點，第一是專案完全以模擬企業流程開發；第二是用一套前端工業化知識來完成專案的。
第一完全以模擬企業流程開發，內容如下：
1、tapd 敏捷管理工具，我們會按照真實企業，在 tapd 上建立迭代，寫需求，分配任務。
2、程式碼倉庫工具選擇 github，操作 git 工具使用企業中最常用的 sourceTree
3、我會安排架構師、技術經理、產品、設計師、測試等角色，讓參與者完全體驗正規流程
4、我會模擬各種真實會議，需求評審會、每日站會、程式碼評審會、測試用例評審會、以及各種技術分享會。
5、我會模擬迭代的提測、上線等流程，來保證專案質量。
6、我積極鼓勵參與者選擇多種角色來進行專案實戰，例如參與者除了開發工作，也可以選擇嘗試技術經理，或者架構師等角色，我們這邊工作人員都會輔助參與者扮演好角色。讓參與者能學到更多東西。
7、我希望用最規範的企業流程來管理開源專案。
第二是用一套前端工業化知識，內容如下：
1、一套好的專案編寫思路，讓你明白先寫什麼，後寫什麼。例如我們應該先定義 css 架構，如果不先做這步，會有很多坑。
2、分支管理策略。我們專案可能是好幾十個人參與，怎麼樣的分支策略，能讓程式碼衝突最小化，幾乎不出現任何問題呢。
3、如何打造一套 css 架構。
4、一套讓全員程式碼風格、規範統一的策略。通過 eslint 配合 git 自動化檢測程式碼，保證全員風格統一。
5、打造一套 scripts 前端工作流，通過命令生成統一元件、 自動更新元件引入、打包釋出等。
6、站在設計模式的角度，架構和優化元件庫，保證程式碼質量。
7、對程式碼進行單元測試。單元測試並不是呼叫幾個 api 而已，而是告訴你單測到底測什麼，測哪些，怎麼測，才能保證程式碼低 bug。
8、如何在沒有設計師支援的情況下，前端如何為 UI 元件庫製作一套字型圖示。
9、通過專案思路、設計模式、css 架構、scripts 工作流、單元測試、分支策略、eslint 策略等一套標準前端工業化體系知識來構建這套 UI 庫。
如果以上都懂的高手，請略過。如果對怎樣編寫一套 UI 元件庫的具體細節更感興趣的朋友，可以加我微信：fcsboy。