資源 | 10套好用的前端框架、設計組件庫推薦

 No.1 Ant Design UI 框架

官網地址： ant.design

體驗地址： xcloud.alipay.com

設計資源包： Download

Github： github.com/ant-design

解析：螞蟻金服出品，基於 ReactJS。一個服務於企業級產品的設計體系，支持桌面端、手機端。基於『肯定』和『天然』的設計價值觀，經過模塊化的解決方案，讓設計者專一於更好的用戶體驗。

No.2 Element UI 框架

官網地址： element.eleme.io

設計資源包： Download

Github： github.com/elemefe

解析：餓了麼出品，基於 VueJS、React、Angular。一套爲開發者、設計師和產品經理準備的桌面端組件庫。

No.3 Bootstrap 框架

官網地址： getbootstrap.com

案例展現： expo.getbootstrap.com

Github： github.com/twbs/bootst…

解析：Bootstrape 是經典的前端框架。主要是有不少的主題，能夠看下案例展現。

No.4 ZUI H5 框架

官網地址： zui.sexy

移動端框架： zui.sexy/m

Github： github.com/easysoft/zu…

解析：一套開源 HTML5 跨屏框架，基於 Bootstrap 深度定製開源前端實踐方案，幫助你快速構建現代跨屏應用。

No.5 Muse UI 框架

官網地址： muse-ui.org

Github： github.com/museui/muse…

解析：Muse UI 基於 Vue2.0 開發，基本實現了 Material Design 設計規範類的全部組件，另外還開發許多的功能性的組件。

No.6 Foundation UI 框架

官網地址： foundation.zurb.com

案例展現： zurb.com/responsive

解析：一套靈活適配於任何設備的框架，能夠很是便捷地搭建出好看的可適配網站、Apps和郵件。資源一直在更新，而且有不少 Html 的模板能幫助你快速開始。

No.7 WePY 小程序框架

官網地址： tencent.github.io/wepy

Github： github.com/Tencent/wep…

解析：一套讓小程序支持組件化開發的框架。WePY 框架在開發過程當中參考了 Vue 等現有框架的一些語法風格和功能特性，對原生小程序的開發模式進行了再次封裝，熟悉 Vue 的你開發起來能夠更加駕輕就熟。

No.8Amaze H5 框架

官網地址： amazeui.org

Github： github.com/amazeui/ama…

解析：Amaze 以移動優先（Mobile first），從小屏逐步擴展到大屏，最終實現全部屏幕適配。相比國外框架，更關注中文排版效果；兼顧國內主流瀏覽器及 App 內置瀏覽器兼容支持。

No.9 ZanUI 組件庫

官網地址： youzanyun.com/zanui

Github： github.com/youzan/vant

解析：有贊出品，支持移動、PC、小程序。能夠看看它的移動端 Vue 組件庫 Vant。

No.10 ICE 組件庫

官網地址： alibaba.github.io/ice

體驗地址： alibaba.github.io/ice/#/block

下載GUI工具： Download

Github： github.com/alibaba/ice

解析：阿里巴巴出品，基於 ReactJS。海量可複用物料，能夠經過 GUI 工具快速構建中後臺應用。但聽說文檔有點坑！因此只推薦設計師看看組件，程序員暫不推薦使用！

- END -

西瓜設計研究所

互聯網創業 | UI設計 | 開發資源 | 教程

未經容許請勿轉載，煩請私信做者獲取受權

© 西瓜設計研究所