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

資源 | 10套好用的前端框架、設計組件庫推薦
原創文章分類：規範/資料版權： 保留做者信息 禁止商業使用 修改做品禁止更改版權信息
12962595002018-02-18
63.7。
Web、Mobile、和小程序。

Image title

No.1 Ant Design UI 框架

官網地址：ant.design

體驗地址：xcloud.alipay.com

設計資源包：Download

Github：github.com/ant-design

Image title

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

No.2 Element UI 框架

官網地址：element.eleme.io

設計資源包：Download

Github：github.com/elemefe

Image title

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

No.3 Bootstrap 框架

官網地址：getbootstrap.com

案例展現：expo.getbootstrap.com

Github：github.com/twbs/bootstrap

Image title

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

No.4 ZUI H5 框架

官網地址：zui.sexy

移動端框架：zui.sexy/m

Github：github.com/easysoft/zui

Image title

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

No.5 Muse UI 框架

官網地址：muse-ui.org

Github：github.com/museui/muse-ui

Image title

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

No.6 Foundation UI 框架

官網地址：foundation.zurb.com

案例展現：zurb.com/responsive

Image title

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

No.7 WePY 小程序框架

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

Github：github.com/Tencent/wepy

Image title

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

No.8 Amaze H5 框架

官網地址：amazeui.org

Github：github.com/amazeui/amazeui

Image title

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

No.9 ZanUI 組件庫

官網地址：youzanyun.com/zanui

Github：github.com/youzan/vant

Image title

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

No.10 ICE 組件庫

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

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

下載GUI工具：Download

Github：github.com/alibaba/ice

Image title

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