前端UI框架選擇區別對比推薦

時間 2019-11-12

標籤前端框架選擇區別對比推薦简体版

原文原文鏈接

UI選擇務必慎重，貨比三家。css

弱水三千只取一瓢：弱水三千只取一瓢，源起佛經中的一則故事，警醒人們在一輩子中可能會遇到不少美好的東西，但只要用心好好把握住其中的同樣就足夠了html

老牌構建於jQuery框架之上的UI外, 新銳UI派系：前端

基於Vue: ELementUI, iViewui
基於React: AntDesign, Amaze UI React

　根據GitHub、前端社區、掘金等平臺對當前流行的前端UI框架的進行了小小的整理和彙總（ps：前端UI框架的應用是經過GitHub star數，社區熱度和使用範圍等進行的粗略的彙總【不分前後】）。但願對尋找UI框架的小夥伴們提供點幫助。vue

　　如下對前端UI框架的移動端、PC端和混合APP的應用進行了列舉。react

移動端UI框架jquery

Mint UI（餓了麼團隊）android

　　中文官網：mint-ui.github.io/#!/zh-cnios

　　描述：基於vue的移動端UI框架git

　　組件庫：　　　　程序員

　　GitHub地址：github.com/ElemeFE/min…

　　star：8705，fork：1810

　　預覽：

elemefe.github.io/mint-ui/#/

SUI Mobile（阿里巴巴共享業務事業部UED團隊）

　　官網：m.sui.taobao.org/

　　描述：一套基於 Framework7 開發的UI庫。基於IOS風格。它很是輕量、精美，只須要引入CDN文件就可使用，

而且能兼容到 iOS 6.0+ 和 Android 4.0+，很是適合開發跨平臺Web App。

　　基於zepto

　　IOS風格

　　預覽：

m.sui.taobao.org/demos/

　　組件庫：

　　GitHub地址：github.com/sdc-alibaba…

　　star：5242，fork：1466

Weui（微信官方設計團隊）

　　描述：WeUI 爲微信 Web 服務量身設計,是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信 Web 開發量身設計，能夠令用戶的使用感知更加統一。

包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

　　GitHub地址：github.com/weui/weui

　　star:16804,fork:4683

　　latest commit 2017.11.2 8pm

　　20 contributors

　　預覽：

　　　　UI組件

weui.io

　　　　JS組件

github.com/weui/weui

YDUI Touch

　　官網：www.ydui.org/

　　描述：一隻注重審美，且性能高效的移動端&微信UI。

　　基於jQuery

　　兼容性：

　　　　兼容絕大多數移動端設備（兼容Android4.0+、IOS6.0+）；

　　採用 flexbox 佈局，因低版本安卓及部分特殊瀏覽器不兼容flex-basis、flex-wrap、inline-flex屬性，YDUI 將採起其餘解決方案；　　

　　組件庫：

　　預覽：

m.ydui.org

　　GitHub地址： github.com/ydcss/ydui

　　star：420，fork：117

　　我的觀點：自定義keyBoard插件爲亮點

GMU（百度GMU小組開發）

　　描述：基於zepto的輕量級mobile UI組件庫，符合jquery ui使用規範，提供webapp、pad端簡單易用的UI組件。

兼容iOS3+ / android2.1+，支持國內主流移動端瀏覽器，如safari, chrome, UC, qq等。

　　GitHub地址：github.com/fex-team/GM…

　　star:1106,fork:461

　　FrozenUI（QQVIP FD團隊• Alloyteam團隊）

　　官方地址：frozenui.github.io/

　　描述：簡單易用，輕量快捷，爲移動端服務的前端框架。基於手Q樣式規範。應用在騰訊手Q增值業務。

兼容android 2.3 +，ios 4.0 + 。

　　GitHub地址：github.com/frozenui/fr…

　　star：2330，fork：645

Foundation

　　中文官網：www.foundcss.com/

　　描述：Foundation是國外最流行的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。

　　GitHub地址：github.com/zurb/founda…

　　star：26751，fork：5751

　　觀點：無不少中文官方文檔，不便於中國開發者

Amaze UI

　　官方地址：amazeui.org/

　　描述：中國首個開源 HTML5 跨屏前端框架。Amaze UI 關注中文排版，根據用戶代理調整字體，

實現更好的中文排版效果。

　　基於jQuery

　　GitHub：github.com/amazeui/ama…

　　star:10949,fork:2397

　　組件庫：

　　觀點：適合PC端更多(例如分頁的實現)

Pure

　　中文官網：www.purecss.cn/

　　描述：純CSS

　　美國雅虎公司出品的一組輕量級、響應式純css模塊，適用於任何Web項目。

　　GitHub：github.com/yahoo/pure/

　　star：17880，fork：1969

PC 端 UI框架

iView

　　官網地址：www.iviewui.com/

　　描述：一套基於 Vue.js 的高質量 UI 組件庫。iView 是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中後臺產品。

　　GitHub地址：github.com/iview/iview

　　star：11421，fork：1745

　　組件庫：

Element UI（餓了麼團隊）

　　官方地址：element-cn.eleme.io/#/zh-CN

　　描述：基於 Vue 2.0 的桌面端組件庫

　　GitHub：github.com/ElemeFE/ele…

　　star：20657，fork：3777

　　組件庫：

SUI（阿里巴巴國際UED團隊-商家業務事業部）

　　官網地址：sui.taobao.org/

　　描述：一套基於bootstrap開發的前端組件庫，同時也是一套設計規範。

　　基於jquery

　　組件庫：

　　GitHub：github.com/sdc-alibaba…

　　star：322，fork：135

　　觀點：偏向設計規範，組件庫相對簡單。

H-ui

　　官方地址：www.h-ui.net/

　　描述：輕量級前端框架，簡單免費，兼容性好，服務中國網站。

　　基於jQuery

　　GitHub地址：github.com/jackying/h-…

　　star：432，fork：196

　　組件庫：

　　觀點：無亮點,借鑑第三方插件完成

layui

　　官方地址：www.layui.com/

　　描述：更可能是爲服務端程序員量身定作，你無需涉足各類前端工具的複雜配置，只需面對瀏覽器自己，

讓一切你所須要的元素與交互，從這裏信手拈來。

　　layui 兼容人類正在使用的所有瀏覽器（IE6/7除外），可做爲 PC 端後臺系統與前臺界面的速成開發方案。

經典模塊化前端框架

　　組件庫：

　　GitHub：github.com/sentsin/lay…

　　star:10278,fork:2909

uiKit（YOOtheme 團隊）

　　官網地址：www.getuikit.net/

　　描述：一款輕量級、模塊化的前端框架，可快速構建強大的web前端界面。

UIkit 兼容 IE9 以上現代瀏覽器。在 IE8 及其如下版本中，全部JavaScript 都會失效。

　　依賴jQuery

　　組件庫：

　　GitHub地址：github.com/uikit/uikit

　　star：11146，fork：1811

Bootstrap

　　中文官網：www.bootcss.com/

　　描述：簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。

　　組件庫

　　GitHub地址： github.com/twbs/bootst…

　　star：118971，fork：56198

　　其餘基於bootstrap衍生出來的模塊：

　　　　Ace Admin後臺管理系統模板：基於bootstrap3；ace.jeka.by/

　　　　Metronic後臺管理模板：www.metronic.com/

　　　　H+:www.zi-han.net/theme/hplus…

　　　　jQuery UI+Bootstrap：github.com/jquery-ui-b…

jQuery UI

　　官方網址：jqueryui.com/

　　組件庫：

　　其餘基於jQuery衍生出來的模板：

　　　　BUI：基於jQuery+KISSY UI: www.builive.com/

　　　　EasyUI:：www.jeasyui.net/

　　　　　　描述：使用easyui你不須要寫不少代碼，你只須要經過編寫一些簡單HTML標記，就能夠定義用戶界面。

　　　　DWZ JUI:jui.org/

混合開發 UI框架

ionic

　　中文官網網址：www.ionic-china.com/

　　基於angular

　　描述：ionic是一個強大的 HTML5應用程序開發框架(HTML5 Hybrid Mobile App Framework)。

ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用於基於 Hybird 模式的 HTML5 移動應用程序開發。

ionic是一個輕量的手機UI庫，具備速度快，界面現代化、美觀等特色。

Framework7

　　官網地址：framework7.cn/

　　描述：Framework7 是一個開源免費的框架能夠用來開發混合移動應用（原生和HTML混合）或者開發 iOS & Android 風格的WEB APP。

　　也能夠用來做爲原型開發工具，能夠迅速建立一個應用的原型。

　　她只專一於爲 iOS 和 Google Material 設計提供最好的體驗。

　　GitHub：github.com/framework7i…

　　star：11304，fork：2439

OnsenUI

　　官網地址：onsen.io/

　　描述：用來構建混合移動端APP的 HTML5 UI 框架

　　GitHub地址：github.com/OnsenUI/Ons…

　　star：5706，fork：716

APP 框架（拓展）

react-native

　　中文官網地址：reactnative.cn/

　　描述：React Native使你可以在Javascript和React的基礎上得到徹底一致的開發體驗，構建世界一流的原生APP。

React Native着力於提升多平臺開發的開發效率 —— 僅需學習一次，編寫任何平臺。(Learn once, write anywhere)

　　GitHub地址：github.com/facebook/re…

　　star：56938，fork：13206

weex

　　官網地址：weex.apache.org/cn/

　　描述：Weex 提供強大的跨平臺能力，可使用相同的 API 開發 Web，Android 和 iOS 應用。

同時，咱們對接口了豐富的擴展能力。

更多基於vue的UI框架：

www.awesomes.cn/subject/vue…

更多基於bootstrap的UI框架：

www.awesomes.cn/subject/boo…

更多基於React的UI框架：

www.awesomes.cn/subject/rea…

更多基於Angular的UI框架：

www.awesomes.cn/subject/ang…

結束語

　　關於混合APP和APP開發方面，小弟沒有不少的經驗，只是進行了粗略的瞭解。以上就是彙總到的一些關於移動端UI框架、PC端及混合APP開發UI框架方面的資料。固然，當今前端飛速發展，關於UI框架方面的不少都沒有總結和彙總到，但願小夥伴們有了解到的能夠留言喔。

參考

http://www.javashuo.com/article/p-vrzogdmh-dg.html

http://www.javashuo.com/article/p-dgdnthms-mu.html

https://wdd.js.org/all-best-ui-frame.html

pc端：

https://www.jianshu.com/p/465e59437c49

相關標籤/搜索