我寫了一個面向源碼閱讀者的 UI 框架（基於 Vue）

軲轆 UI

官方文檔

GitHub

軲轆 UI 是一個不太同樣的 UI 框架。

本 UI 框架是一個「面向源碼閱讀者」的框架。若是對你有幫助，請不要吝惜你的 star。

也就是說，我製做這個框架的目的就是讓前端新人學習輪子的製做思路。全部代碼都追求可讀性。

1. 你能夠經過查看逐個 commit 來學習本框架的製做思路
2. 也能夠經過我錄製的視頻來學習 （抱歉，因爲製做很是耗時，因此視頻是收費的。不過項目搭建過程的錄屏是免費的，這幾節視頻能幫你快速從零開始本項目。）

若是你想從第一個commit 開始看，請點擊這裏。

若是你對代碼有疑問，歡迎提issue，我會回答你的疑問。也能夠在本文末尾加羣諮詢。

本 UI 框架是基於 Vue 2 實現的。

注意：本 UI 框架的代碼還沒有徹底完工（目前代碼大概完成 50%），請不要在生產環境中使用本 UI 框架。

你能學到什麼

1. 單元測試、覆蓋率、持續集成等工程概念
2. 重構、TDD/BDD、設計模式、單向數據流等技術概念
3. Vue 的幾乎全部功能，而且是深刻理解這些功能，而不是膚淺理解

有哪些輪子

• 簡單輪子：按鈕、輸入框、網格、佈局、Toast、Tabs、Popover、手風琴（代碼已完成）
• 進階輪子：級聯選擇、無縫輪播、響應式導航條、分頁、表單驗證、Table、圖片上傳、Sticky、Tree、Suggestion、Datepicker（代碼未完成）
• 其餘：路由、狀態管理（代碼未完成）

注意：這只是目前的計劃，具體要完成的輪子可能與上面有出入。

項目特色

1. 使用 Travis CI 進行持續集成
2. 有豐富的單元測試，項目完成時，指望測試覆蓋率超過 90%
3. 自說明的代碼，即便沒有註釋，你也能看懂
4. 初期我使用 parcel 構建方便新人上手，後期改成 Vue Cli 3 以實現更多功能

背景

我幾年前曾經發表過《笨辦法學前端》一文， 當時我以爲開源社區裏雖然有不少不錯的庫，可是這些庫都是以實用爲主，其源碼並不適合新人閱讀。

因而我業餘時間用原生 JS 造了幾個輪子放在 GitHub，沒想到竟然有幾百人關注，還但願我能發佈更詳細的教程。

可是我當時並無時間來作更詳細的教程。

如今我終於……仍是很忙，不過我決定用每週六和週日來錄製「造輪子」的視頻。

這一次爲了順應前端的潮流，我直接採用 Vue 2 來造輪子。若是你正在學習 Vue 2，那麼軲轆 UI 的源碼會很是適合你閱讀。

視覺稿

本 UI 框架借鑑了一些成熟 UI 框架（如 Framework七、Element UI 和 Ant Design）的外觀，簡化以後我本身製做了一個視覺稿。

若是你發現視覺稿有什麼不足的地方，能夠直接在上面留言，我也會看到。

爲何叫軲轆UI

由於軲轆就是「輪子」的意思。

源碼學習微信交流羣

1羣2羣已滿，3羣連接