前端ui框架有哪些
在前端项目开发过程中，现在很少有人会使用原生的CSS来搭建页面，总归都会引入一些前端UI框架以减少代码的书写。一般为了方便自己的使用，很多大公司都有自己的一套UI框架，同时也会把其开源出来。下面就是最近经常使用并且很流行的一些前端UI框架，总有一款适合你：
Mint UI
Mint UI是饿了么团队开发的基于Vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。
WeUI
WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。
Cube-ui
Cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
iView UI
iView UI是一个强大的UI库，基于vue，有很多实用的基础组件比elementui的组件更丰富，主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npmwebpackbabel 开发，支持 ES2015 高质量、功能丰富 友好的 API ，自由灵活地使用空间。
LayUI
LayUI是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
ElementUI
Element是饿了么前端开源维护的Vue UI组件库,组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。 主要用于开发PC端的页面，是一个质量比较高的Vue UI组件库。
at-ui
at-ui 是一款阿里团队创建的基于 Vue 2.x 的前端 UI 组件库，主要用于快速开发 PC 网站产品。 它提供了一套 npmwebpackbabel 前端开发工作流程，CSS 样式独立，即使采用不同的框架实现都能保持统一的 UI 风格。
amaze UI
amaze UI
Amaze UI 是一个移动优先的跨屏前端框架。提供基础样式，网格，表格、表单、按钮及常用组件样式。是一个轻量级（所有 CSS 和 JS gzip 后 100 kB 左右）、 Mobile first 的前端框架
Vant UI
Vant UI是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。
Flutter
Flutter 是谷歌的移动端 UI 框架，可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的.
ionic
Ionic既是一个CSS框架也是一个Javascript UI库,Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。
绛旓細3. Semantic UI Semantic UI鏄竴涓槗浜庝娇鐢ㄥ拰鎵╁睍鐨鍓嶇妗嗘灦锛屽畠鎻愪緵浜嗕赴瀵岀殑棰勫畾涔夋牱寮忓拰缁勪欢锛岀敤浜庢瀯寤虹幇浠ｅ寲鐨勭敤鎴风晫闈係emantic UI娉ㄩ噸璇箟鍖栨爣璁帮紝浣縃TML浠ｇ爜鏇村姞鏈夋剰涔夊拰鏄撲簬缁存姢銆傛澶栵紝瀹冭繕鎻愪緵浜嗕赴瀵岀殑涓婚鍜屽畾鍒堕夐」锛屽彲浠ユ牴鎹渶姹傝繘琛屼釜鎬у寲瀹氬埗銆4. Vue.js Vue.js鏄竴涓笎杩涘紡鐨勫墠绔鏋讹紝瀹...
绛旓細Web鍓嶇妗嗘灦涔媀ue.jsvue.js浼樺娍浠嬬粛锛氭笎杩涘紡鏋勫缓鑳藉姏鏄痸ue.js鏈澶х殑浼樺娍锛寁ue鏈変竴涓畝娲佽屼笖鍚堢悊鐨勬灦鏋勶紝浣垮緱瀹冩槗浜庣悊瑙ｅ拰鏋勫缓銆倂ue-element-admin涓涓熀浜巚ue0鍜孍lement鐨勬帶鍒堕潰鏉UI妗嗘灦锛岃繖鏄娇鐢╲ue鎶鏈爤寮鍙戠殑鍓嶇绋嬪簭鍛樼殑棣栭夌鐞嗙郴缁熸ā鏉匡紝妯℃澘宸茬粡闈炲父鎴愮啛浜嗭紝骞朵笖鏈夌浉鍏崇殑绀惧尯鍜岀淮鎶や汉鍛橈紝寮鍙戞椂鍊...
绛旓細涓よ呭尯鍒湁閫傜敤鎬т笉鍚屽拰鐣岄潰鍙婄粍浠跺樊寮傘傞傜敤鎬т笉鍚岋細layui鏄竴娆鹃噰鐢ㄨ嚜韬ā鍧楄鑼冪紪鍐欑殑鍓嶇UI妗嗘灦锛岄棬妲涗綆锛屾嬁鏉ュ嵆鐢紝鍏煎鍏ㄩ儴娴忚鍣紙闄E6/7锛夛紝鍙綔涓篜C绔悗鍙扮郴缁熶笌鍓嶅彴鐣岄潰鐨勯熸垚寮鍙戞柟妗堬紝ElementUI鏄熀浜嶸ue.js 2.0寮鍙戠殑妗岄潰绔疷I妗嗘灦锛屾墜鏈虹鏈夊搴旀鏋舵槸MintUI銆傜晫闈㈠強缁勪欢鐨勫樊寮傦細layui...
绛旓細浠婂ぉ灏忕紪瑕佽窡澶у鍒嗕韩鐨勬枃绔犳槸鍏充簬楂樿川閲廤eb鍓嶇妗嗘灦锛岀浉淇″緢澶歐eb鍓嶇宸ョ▼甯堥兘浼氬姝ゆ劅鍏磋叮鐨勩俉eb鍓嶇妗嗘灦灏辨槸涓轰簡鑺傜害寮鍙戞垚鏈拰鏃堕棿锛屼竴鑸紑鍙戜竴涓」鐩兘浼氱敤鍒板墠绔鏋(闄ら潪鑷繁鏈夊墠绔紑鍙戝洟闃)銆備粖澶╁皬缂栧氨涓哄ぇ瀹跺垎浜竴浜涢珮璐ㄩ噺鐨勫墠绔鏋跺笇鏈涜兘澶熷澶у鏈夋墍甯姪銆備竴銆丵UICKUIQUICKUI鏄竴濂楀畬鏁寸殑浼佷笟绾...
绛旓細8銆丄maze UI 杩欐槸绉颁负濡瑰瓙UI鐨勫紑婧愭鏋讹紝鎹О鏄腑鍥介涓紑婧怘TML5璺ㄥ睆鍓嶇妗嗘灦銆傚瀛怳I浠ョЩ鍔ㄤ紭鍏堜负鐞嗗康锛屼粠灏忓睆閫愭笎鍒板ぇ灞忥紝瀹炵幇鍝嶅簲寮忕綉椤点侫maze UI鍖呭惈20+涓狢SS缁勪欢銆20+涓狫S缁勪欢锛屾洿鏈夊涓寘鍚笉鍚屼富棰樼殑Web缁勪欢銆傜浉姣斿浗澶栨鏋讹紝濡瑰瓙UI鍏虫敞涓枃鎺掔増鎻愪緵鏈湴鍖栨敮鎸併傞潰鍚慔TML5寮鍙戯紝浣跨敤CSS3鏉...
绛旓細4銆丗oundation by ZURB鏄紑鍙戦傚簲鍚勭璁惧涓婄殑鍓嶇妗嗘灦锛屼富瑕佸紑鍙戝搷搴斿紡web搴旂敤妗嗘灦锛屾彁渚涘緢涓板瘜鐨凞EMO瀹炰緥锛屽璧锋潵涔熼潪甯告柟渚夸笂鎵嬶紝涔熸彁渚涗赴瀵岀殑鍥炬爣搴撱5銆丄maze UI鏄交閲忕骇鐨勫墠绔簲鐢ㄦ鏋讹紝鏄浗鍐呮瘮杈冩祦琛岀殑妗嗘灦锛屾瘮杈冮傜敤浜庣Щ鍔ㄧ鍝嶅簲寮忓紑鍙戞鏋讹紝鍙互鎸夌収椤圭洰瑕佹眰鐢熸垚涓撳睘鐨刄I妗嗘灦搴撹繘琛屼娇鐢紝缁勪欢闈炲父涓板瘜...
绛旓細jQuery EasyUI鏄竴缁勫熀浜巎Query鐨刄I鎻掍欢闆嗗悎浣擄紝鑰宩Query EasyUI鐨勭洰鏍囧氨鏄府鍔﹚eb寮鍙戣呮洿杞绘澗鐨勬墦閫犲嚭鍔熻兘涓板瘜骞朵笖缇庤鐨刄I鐣岄潰銆傚紑鍙戣呬笉闇瑕佺紪鍐欏鏉傜殑javascript锛屼篃涓嶉渶瑕佸css鏍峰紡鏈夋繁鍏ョ殑浜嗚В锛屽紑鍙戣呴渶瑕佷簡瑙ｇ殑鍙湁涓浜涚畝鍗曠殑html鏍囩銆2銆丅ootstrap Bootstrap锛屾潵鑷 Twitter锛屾槸鐩墠寰堝彈娆㈣繋鐨鍓嶇妗...
绛旓細鍗庝附鐨勭晫闈紝鐏垫椿鐨勫姛鑳斤紝杩樻湁寮鍙戝伐鍏烽兘鏄厤濂楃殑锛屼絾鏈変釜鏈澶х殑闂锛岀敤灏卞緱鑺遍挶锛3銆乪asyui easyui甯姪浣犳瀯寤轰綘鐨剋eb搴旂敤鏇村姞瀹规槗銆傚畠鏄竴涓熀浜巎query鐨勬彃浠讹紝寮鍙戝嚭鏉ョ殑涓濂楄交閲忕骇鐨剈i妗嗘灦锛岄潪甯稿皬宸ц屼笖鍔熻兘涓板瘜銆備絾鏄ス鏈変竴涓渶澶х殑闂灏辨槸浠ｇ爜鍙兘鎵惧埌浠ュ墠鐨勫紑婧愮殑鐗堟湰锛屽埌浜1.2浠ュ悗鐨勭増鏈簮浠ｇ爜...
绛旓細涓夈丄maze UI锛1銆丄maze UI鏄交閲忕骇鐨鍓嶇搴旂敤妗嗘灦锛屾瘮杈冮傜敤浜庣Щ鍔ㄧ鍝嶅簲寮忓紑鍙戞鏋讹紝鍙互鎸夌収椤圭洰瑕佹眰鐢熸垚涓撳睘鐨刄I妗嗘灦搴撹繘琛屼娇鐢紝缁勪欢闈炲父涓板瘜锛屽彲浠ユ瀯寤哄嚭婕備寒鐨剋eb椤甸潰銆2銆佸畠鐨勪紭鐐规湁锛氫互绉诲姩浼樺厛涓虹悊蹇碉紝绉诲姩璺ㄥ睆閫傞厤杈冨ソ锛屾枃妗ｈ鏄庤緝濂斤紝闆嗘垚鎺т欢姣旇緝涓板瘜锛屽ぇ澶ф彁楂樺紑鍙戞晥鐜囷紝鍥藉唴棣栦釜寮婧愯法灞忓墠绔...
绛旓細铏界劧鐜板湪vue銆丷eact鍜孉ngular寰堢伀锛屽涔犵殑浜轰篃瓒婃潵瓒婂锛屼絾鏄鏋滃彧鏄紑鍙慞C绔」鐩紝濡傛灉鏄竴濂楁瘮杈冩垚鐔熺殑鎶鏈柟妗堬紝涔熸湭蹇呬笉鑳界敤jquery銆傝繖閲屾帹鑽怮UICK UI鍓嶇妗嗘灦锛孮UICK UI涓嶄粎浠呮槸涓涓墠绔鏋讹紝鑰屾槸涓撻棬闈㈠悜浼佷笟寮鍙戠殑涓鏁村鍓嶇瑙ｅ喅鏂规銆鍖呮嫭鍩虹寮鍙戞鏋躲100澶氱鍔熻兘寮哄ぇ鐨刄I鎺т欢銆佸嚑鍗佸绮剧編鐨勭毊鑲...
