前端常见的21个框架总结

怼烎@ 2022-03-02 04:46 241阅读 0赞

前端的技术日渐更新，最近得空，花了一上午的时间，将前端常见的UI框架总结了一下，在开发的过程之中，有了这些，不断能够提高自己的工作效率，还可以在工作之余了解更多。希望大家喜欢。

1.Layui

官方网址：http://www.layui.com/

Layui是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。Layui还很年轻，首个版本发布于2016年金秋，她区别于那些基于MVVM底层的UI框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

![1000][]

经典模块化前端框架

2.NEC：

官方网址：http://nec.netease.com/case

你是否常常碰到以下问题：你总是看不懂他写的代码，或者读起来很吃力；你需要改他的代码却无从下手，或总是要去问他这里是什么改了会不会影响其他代码；你和他一起开发一个产品，你总是怕代码和他有冲突或互相影响；你的代码在多次维护任务之后变得越来越臃肿，越来越难以维护，解决以上问题只需一种方法——读我们的规范！

![1000 1][]

国产web前端框架推荐之–NEC

3：amaze UI

官方网址：http://amazeui.org/

之前公司的网站被黑客攻击之后，整个网站的东西都用不了了，处于丢失和瘫痪的状态，楼主毫不犹豫在这个网站上找了一个框架，仅仅两三天的时间，就成功挽救了这一糟糕的局面，还是要感谢我们这强大的框架，妹子UI,适配pc端和移动端，功能齐全，网站开发什么的，都SOeasy

![1000 2][]

中国首个开源 HTML5 跨屏前端框架.

4.NEJ

官方网址：http://nej.netease.com/

NEJ全称：Nice Easy Javascript 是由网易前端组工程师们发起创建的简洁，美观，真正的跨平台web前端开发框架；在适配性上支持桌面及移动平台、浏览器及混合应用开发，补丁模式无缝扩展适配平台，配置方式灵活定制目标平台

![1000 3][]

5.bootstrap

框架官方网址：http://www.bootcss.com/

这个我就不多说了，大多数人都在用这个框架来开发，官方文档的API完整可靠，还有各种Bootstrap相关优质项目推荐，前端开发首选框架

![1000 4][]

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

6：Foundation

官方网址：http://www.foundcss.com/

Foundation 是一个易用、强大而且灵活的响应式前端框架，用于构建基于任何设备上的响应式网站、 Web应用和电子邮件。结构语义化、移动设备优先、完全可定制。

![1000 5][]

响应式前端框架

7.Jquery代码库

官方网址：http://www.jqueryui.org.cn/

![1000 6][]

基于Jquery的开源网页用户界面代码库：

8.jQuery插件库

官方网址：http://www.jq22.com/

史上最全的jQuery效果，包括了开发所需要的所有需求的demo，如果有不会的东西，就来jQuery插件库吧，这里总有一些你想要的，还在等什么？

![1000 7][]

9.FrozenUI

官方网址：http://frozenui.github.io/

随心所用的样式组件，更显灵动的JS插件，酷炫好玩的案例秀，提供的Animationcase，把业务上有趣好玩的案例沉淀下来，帮助日后能更快速找到设计灵感。FrozenUI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。

![1000 8][]

移动端开发专用框架：

10：SUI

官方网址：http://m.sui.taobao.org/

SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。通过SUI，可以非常方便的设计和实现精美的页面。同时sui还有移动端版本msui，msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。

![1000 9][]

搭建手机H5应用：

11:AUI

官方网址：http://www.auicss.com/

AUI2.0是一套全新的AUI框架，在1.X基础上进行了重新架构。结合实际项目出发，站在开发者和项目的角度，重新定义AUI框架。在2.0中使用了大量弹性响应式布局，采用容器+布局结构+控件的嵌套形式，方便开发者快速布局样式。我们充分吸取了AUI使用者的反馈意见和借鉴了市场上其他优秀UI框架，完成了2.0版本的开发。2.0遵循GoogleMaterial 设计规范，使用MIT开源协议。

![474][]

12:MUI：

官方网址：http://dev.dcloud.net.cn/mui/

最接近原生APP体验的高性能前端框架,相信这个大家都不陌生：鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件

![366][]

13:Semantic UI

官方网址：http://www.semantic-ui.cn/

Semantic作为一款开发框架，帮助开发者使用对人类友好的HTML语言构建优雅的响应式布局。更快地设计赏心悦目的网站

![456][]

[14.Aliceui][]

[官方网址：http://www.oschina.net/p/aliceui?fromerr=mgWZvlr0][14.Aliceui]

Aliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。

![439][]

[15.H-ui][14.Aliceui]

[官网地址：][14.Aliceui][http://www.h-ui.net/][http_www.h-ui.net]

H-ui是轻量级前端框架，简单免费，兼容性好，适用于中国网站。H-ui是一个相对成长比较慢的前端框架，相比目前行业众多框架还有很多不足。但初心不改，实实在在把事做好，做用户最喜欢的框架。

![916][]

[16.Weui][14.Aliceui]

[官网地址：][14.Aliceui][https://github.com/weui/weui][https_github.com_weui_weui]

weUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、toast、article、actionsheet、icon等各式元素。

![527][]

[17.YDUI Touch][14.Aliceui]

[官网地址：][14.Aliceui][http://www.ydui.org/][http_www.ydui.org]

YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高;使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局;实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换 px;自定义[JavaScript][]组件、Less文件、Less变量，定制一份属于自己的YDUI;

![1000 10][]

一只注重审美，且性能高效的移动端&微信UI。

18.ZUI

官方网址：http://zui.sexy/

简友补充的，现在添上，一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。基于 Flex 设计，支持移动端全部主流浏览器，支持 Android 微信内置浏览器

![1000 11][]

开源html5跨屏框架

19：EasyUI

官方网址：http://www.jeasyui.net/

easyui是一种基于jQuery的用户界面插件集合。为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。完美支持HTML5网页的完整框架。节省您网页开发的时间和规模。

![521][]

21：pure

官方网址：http://purecss.org/layouts/

Pure精心设计，只为可以在任何Web项目中使用。为了例证这一点，我们制作了如下几个模板。这些模板都是响应式的，并且没有使用任何JavaScript。

![672][]

原文作者：祈澈姑娘

技术博客：[https://www.jianshu.com/u/05f416aefbe1][https_www.jianshu.com_u_05f416aefbe1]

[1000]: /images/20220302/611b0e136b3444bba37bfc01190b5c8e.png
[1000 1]: /images/20220302/eaa890bff2864f27817b265a2eee1e0b.png
[1000 2]: /images/20220302/8234c74480ac4740906546ed3a9b66a4.png
[1000 3]: /images/20220302/78a72786cf8e4f63b4c747b4f39696be.png
[1000 4]: /images/20220302/2c0cafec52a744e0bc2aba5195e2592e.png
[1000 5]: /images/20220302/c0cd1c62fa2d4e58967f1291d045a58a.png
[1000 6]: /images/20220302/e610ee6dcd50459ab22e331fe7d7130d.png
[1000 7]: /images/20220302/466bf1e82a8b4a70ab10175dfa5b8f67.png
[1000 8]: /images/20220302/1d1d59f36c034270a37508f7f4c07a28.png
[1000 9]: /images/20220302/f376a4703347438abc2b86bbc3cbd5d1.png
[474]: /images/20220302/ab29fae4a8d541509c6ba745d66404cc.png
[366]: /images/20220302/4e3c1650ea0748d5a4038b14dd668f4c.png
[456]: /images/20220302/1bc625033faf45318b4561719c16d7e2.png
[14.Aliceui]: https://www.jianshu.com/writer#/notebooks/11762891/notes/15868666
[439]: /images/20220302/c3b011d78fee439182fa134f8736fe72.png
[http_www.h-ui.net]: https://link.jianshu.com?t=http%3A%2F%2Fwww.h-ui.net%2F
[916]: /images/20220302/980a4d0b306e4dc39d0b0cc181312775.png
[https_github.com_weui_weui]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fweui%2Fweui
[527]: /images/20220302/29cf63ef3bbf412d949982ed9a4e2534.png
[http_www.ydui.org]: https://link.jianshu.com?t=http%3A%2F%2Fwww.ydui.org%2F
[JavaScript]: https://link.jianshu.com?t=http%3A%2F%2Flib.csdn.net%2Fbase%2Fjavascript
[1000 10]: /images/20220302/fdf3f642d56f4817a7d350569ffa8afa.png
[1000 11]: /images/20220302/f3dd7d5eb3884e60826e6bf84a88d617.png
[521]: /images/20220302/e40b4341462549108b313a1071a17615.png
[672]: /images/20220302/c667da88512d4cf0a34d5ba0d878a342.png
[https_www.jianshu.com_u_05f416aefbe1]: https://link.jianshu.com/?t=http%3A%2F%2Flink.zhihu.com%2F%3Ftarget%3Dhttps%253A%2F%2Fwww.jianshu.com%2Fu%2F05f416aefbe1