「前端必備」介紹幾款優秀的前端UI框架

還記得第一次用UI框架的時候嗎？那時候你們用的什麼呢？

那時候學習過Java，做一個電子購物商城，它的後臺用的就是easyUI，那時候easyUI還沒有現在的UI框架好用，用起來很繁瑣，當然也沒有現在的好看，但也不得不用。

後來再弄一個電影站點的時候，發現了LayUI，入門簡單，使用起來更方便，後臺界面的開發快速而又美觀。直到現在適合於各種開發的UI框架相應而生，針對不同的界面開發選擇相應的UI框架，能使開發效率事半功倍。

這篇文章就為大家介紹多種前端UI框架，助你高效開發。

LayUI

由職業前端傾情打造，面向全層次的前後端開發者，低門檻開箱即用的前端 UI 解決方案，layui是一個採用自身模塊規範化編寫的前端UI框架，它依照原生HTML/CSS/JS的書寫與組織形式，入門簡單，使用也非常簡單。從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。

JEUI

它是一款國產前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，國內很多程式設計師javascript不熟, 大大影響了開發速度. 因此JEUI不需要開發人員去關心javascript怎麼寫, 只要寫標準html就可以了，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。
JEUI基於jQuery的UI框架，包括表單、布局、表格等等常用UI控制項，使用JEUI可以快速輕鬆地創建風格統一的界面效果。

瀏覽器兼容非常牛皮，能兼容IE8以上的瀏覽器。

DWZ

DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發的基於jQuery實現的Ajax RIA開源框架. 設計目標是簡單實用,快速開發,降低ajax開發成本。

DWZ 支持用 html 擴展的方式來代替 javascript 代碼, 基本可以保證程式設計師不董 javascript, 也能使用各種頁面組件和 ajax 技術. 如果有特定需求也可以擴展 DWZ 做定製化開化.

MDUI

MDUI 是一個基於 Material Design 的前端框架。

19 種主色、16 種強調色、1 種夜間主題，只需添加一個 CSS 類即可切換。CSS 僅 26.7KB，JavaScript 僅 14KB，加載更迅速。移動優先，從小屏逐步擴展到大屏，最終實現所有屏幕適配。不依賴任何第三方庫，節約網絡流量，使加載更迅速，提高用戶體驗。使用 CSS3 來做動畫交互，平滑、高效，讓 Web 應用的動畫更流暢。提供自定義打包功能，按需打包需要的主題和組件，使文件體積驟然減小。MDUI 包含了 20 餘個組件，且每個組件都可以適應不同主題。

只需懂一點 HTML、CSS、JS 的基礎知識，就能使用 MDUI。

ElementUI

element ui框架的按鈕組件，這款由餓了麼前端開源的UI框架，一經面世，就收穫大量程式設計師的芳心，在github 上更是高達29.8k的star早已說明一切，用於開發PC端的頁面還是綽綽有餘的，如果說你是用vue開發者，卻沒用過element UI，那你肯定不是合格的vue開發者。

WeUI

jQuery WeUI 是專為微信公眾帳號開發而設計的一個簡潔而強大的UI庫，包含全部WeUI官方的CSS組件，並且額外提供了大量的拓展組件，豐富的組件庫可以極大減少前端開發時間。

jQuery WeUI 的最大特點是它只提供UI組件，並不會對項目所使用的框架和其他庫有任何的限制，幾乎可以在任何環境下使用。無論你的項目是基於jQuery，還是 React, Angular, Vue， 你都會發現 jQuery WeUI 能非常方便的和他們結合使用。既是你的項目是一個有很悠久歷史的老項目，也幾乎可以做到拿來即用。

Flutter

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面，前端對於 Flutter 的熱忱度之高一度讓人有點驚訝，事實上在 Flutter 社區內見到的客戶端開發者遠多於前端開發，不過前端對於跨端解決方案確實有著天然的渴求。

Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。

iView ui

iViewui一套基於 Vue.js 的高質量 UI 組件庫，搭配使用 iView UI 組件庫形成的一套後臺集成解決方案，由 TalkingData 前端可視化團隊部分成員開發維護。iView Admin 遵守 iView 設計和開發約定，風格統一。

Mint UI

Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發需要。通過它，可以快速構建出風格統一的頁面，提升開發效率。

真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件，無需再糾結文件體積過大。

考慮到移動端的性能門檻，Mint UI 採用 CSS3 處理各種動效，避免瀏覽器進行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗。

依託 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮後的文件體積也僅有 ~30kb (JS + CSS) gzip。

YDUI Touch

YDUI Touch 專為移動端打造，在技術實現、互動設計上兼容主流行動裝置，保證代碼輕、性能高。

使用 Flex 技術，靈活自如地對齊、收縮、擴展元素，輕鬆搞定移動頁面布局。

實現強大的屏幕適配布局，等比例適配所有屏幕。什麼？用得不開心？輕鬆切換 px。

自定義Javascript組件、Less文件、Less變量，定製一份屬於自己的YDUI。

SUI Mobile

SUI Mobile 是一套基於 Framework7 開發的UI庫。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，並且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開發跨平臺Web App。輕量的UI庫
SUI Mobile 非常輕量，核心庫壓縮Gzip後的JS、CSS網絡傳輸體積總共只有52K，卻提供了20+個常用的組件。

Amaze ~ 妹子 UI

中國首個開源 HTML5 跨屏前端框架

Amaze UI 以移動優先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現所有屏幕適配，適應移動互聯潮流。

Amaze UI 含近 20 個 CSS 組件、20 餘 JS 組件，更有多個包含不同主題的 Web 組件，可快速構建界面出色、體驗優秀的跨屏頁面，大幅提升開發效率。

相比國外框架，Amaze UI 關注中文排版，根據用戶代理調整字體，實現更好的中文排版效果；兼顧國內主流瀏覽器及 App 內置瀏覽器兼容支持。

Amaze UI 面向 HTML5 開發，使用 CSS3 來做動畫交互，平滑、高效，更適合行動裝置，讓 Web 應用更快速載入。

cube-ui

質量可靠：由滴滴內部組件庫精簡提煉而來，歷經考驗，並且每個組件都有充分單元測試，為後續集成提供保障。

體驗極致：以迅速響應、動畫流暢、接近原生為目標，在交互體驗方面追求極致。

標準規範：遵循統一的設計交互標準，高度還原設計效果；接口標準化，統一規範使用方式，開發更加簡單高效。

擴展性強：支持按需引入和後編譯，輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發。