美文网首页javaWeb学习IT与工作IT
进阶攻略|前端最全的框架总结

进阶攻略|前端最全的框架总结

作者: 祈澈菇凉 | 来源:发表于2017-08-16 10:54 被阅读12748次

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

1.Layui

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

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

经典模块化前端框架

2.NEC:

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

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

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

3:amaze UI

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

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

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

4.NEJ

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

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

5.bootstrap

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

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

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

6:Foundation

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

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

响应式前端框架

7.Jquery代码库

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

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

8.jQuery插件库

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

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

9.FrozenUI

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

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

移动端开发专用框架:

10:SUI

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

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

搭建手机H5应用:

11:AUI

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

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

12:MUI:

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

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

13:Semantic UI

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

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

14.Aliceui

官方网址:http://www.oschina.net/p/aliceui?fromerr=mgWZvlr0

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

15.H-ui

官网地址:http://www.h-ui.net/

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

16.Weui

官网地址:https://github.com/weui/weui

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

17.YDUI Touch

官网地址:http://www.ydui.org/

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

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

18.ZUI

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

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

开源html5跨屏框架

19:EasyUI

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

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

21:pure

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

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

原文作者:祈澈姑娘

技术博客:https://www.jianshu.com/u/05f416aefbe1

90后前端妹子,爱编程,爱运营,爱折腾。

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

文末福利:关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。公众号回复“1”,拉你进程序员技术讨论群

相关文章

  • 进阶攻略|前端最全的框架总结

    前端的技术日渐更新,最近得空,花了一上午的时间,将前端常见的UI框架总结了一下,在开发的过程之中,有了这些,不断能...

  • 进阶攻略|前端最全的框架总结

    前端的技术日渐更新,最近得空,花了一上午的时间,将前端常见的UI框架总结了一下,在开发的过程之中,有了这些,不断能...

  • 学习图谱

    前端整体 基础学习路线 进阶学习路线 整体学习路线 「前端进阶」2018/2019 史上最全的前端学习路线 How...

  • nodejs 学习指南

    社区 官网 cnode中文网 饿了么大前端 Node.js 进阶教程 文章 WEB前端知识总结 前端攻略系列

  • 进阶攻略|最全的前端开源JS框架和库

    新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 ...

  • 【前端攻略】水平垂直居中方案

    参考: 【前端攻略】最全面的水平垂直居中方案与flexbox布局

  • vue入门——大前端

    大前端进阶 前端三剑客:HTML+CSS+JS 前端框架:jQuery、BootStrap、Vue vue的思想是...

  • web前端学习攻略

    web前端学习攻略 第一阶段: HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css...

  • Room 数据库框架最全攻略

    Room 数据库框架最全攻略 Room 是Google官方推出的Android Sqlite数据库处理框架,是子啊...

  • 2019 北京赏花攻略

    从2019北京最全赏花攻略(花种+最佳观赏期+地点推荐)及其公众号总结而来,仅作为个人春日赏花攻略,详细攻略请查看...

网友评论

  • 浪漫没有天份:这么多框架,我该用那个呢
  • 0c45406e8da8:看到你的文章,觉得写得很不错,也很有分享精神。我们侠课岛正好在找远程录制课程视频或图文教程的朋友,我们会给到课程的需求大纲,每一节课程需要你来详细展开写一些代码举例和讲解清楚,对经验积累和创新能力有一定的要求。有兴趣联系我。微信:zhimadt
    祈澈菇凉:@David文_cf9e 好的
  • 奋斗123:美眉,你好,我目前在学 Pure.css,可以分享几个 Demo 给我么,网上这个框架的 Demo 太少了。
    祈澈菇凉:@时光旅行家 这个木有总结哦
  • Rector:不错哦
    再推荐一款[2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板](http://2sharings.com/2017/responsive-professional-multipurpose-bootstrap-4-admin-template)
    祈澈菇凉:@Rector 恩恩,get到了
  • f463c89e8d2e:對於前端的理解,如果僅局限於UI框架,那只能趁之為美工而非前端:sweat_smile::sweat_smile:
    祈澈菇凉: @Mokaful 真的嘛,我也想看看
    f463c89e8d2e: @祈澈姑娘 嗯的,听说搞前端的女生都特别水灵😂😂
    祈澈菇凉: @Mokaful UI框架只是前端很小很小的一个部分
  • e4d93d6aae84:作为一个初学者,收藏了
  • 399098ff5605:顶一下 楼主
    bootstrap特效手册:http://t.cn/RK5JCg6
  • IT晴天:呃,ionic,clarity,洋葱等等呢?几个热门都没有,冷门一萝框
    祈澈菇凉: @晴天_woodstream 总结的都是ui框架
    祈澈菇凉: @晴天_woodstream 这些都是开发中经常用的
  • 木小羽:我去,前端框架你不讲react和angular2的,你是真的皮😂。说是ui库吧,蚂蚁的antd也没有,不应该吧
    祈澈菇凉: @木小羽 标题是这样,你看前言,我说了是UI框架呀
  • Mr_疯不觉:vue算是什么分类呢?
    扬沙沙: @Mr_疯不觉 前端范围太广了,android的前端也有
    祈澈菇凉: @Mr_疯不觉 js框架
  • 初夏_Tz:一样都是前端工程师 :relaxed: :relaxed:
    祈澈菇凉:@初夏_deng 可以啊,主页有联系方式,你也可以留下你的
    初夏_Tz:@祈澈姑娘 可以啊 目前我还是个小白 可以给个联系方式吗
    祈澈菇凉: @初夏_deng 相互交流
  • 641c0c7b18e0:楼主好厉害啊.第一次碰到这么强的妹纸.之前在大学学习过java,但是不喜欢java,没有图形界面,不像前端那么精彩,所以想转前端,自学了jquery,bookstrap,能看明白vue.js是怎么用的,但是没有实际去用.node.js自己搭建过一个hello,world,看楼主发的技术资料,知道楼主是个既漂亮,又有心的前端妹纸,还会王者荣耀,全能呀.能不能带带小弟.前端小伙伴群让我加一下哈.大家共同进步.
    祈澈菇凉: @上海一家宁 谢谢夸奖,在工作的时候,经常遇到这些,所以就总结了一下,有的源码之家就可以拿来用了,都不需要UI设计的,这些模板自带UI属性,很好
  • 涂图云:棒呆:fist:
  • 林千景:没有kendo么
  • 郑乔尹在旅游:有一个zui的前端框架,不错
  • 3cb1fd325b16:怎么说呢,如果仅仅只是想安安稳稳的做一个基础的前端,多了解了解这些框架,确实很不错,但是如果真的想深入的话,个人觉得,重心不应该放在这些UI框架上面,因为大部分的框架,都有现成的API或者Demo供参考,进本就是拿来即用的,不会太难使用的(难使用估计也不会又人去用),还是得自己动手深入底层的css,js等等,技术基础决定上层建筑,例如可以去阅读jquery,angular,vue,react的源码等等,当然,这是个人意见,仅供参考
    祈澈菇凉:@訫隨妳飛_de97 这只是用来提高工作效率,只是小小的一部分,前端技术太多了,最近正在总结中
  • Delevan_QAQ:真心可以帮到我,最近在学习 前端,谢了
    祈澈菇凉:@Delevan_QAQ 加油
  • 没技术的BUG开发攻城狮:正在学习React,然后在学React Native
    祈澈菇凉:@iOSer菜鸟养成中 恩,正在学习中
  • 李白不喝酒:ionic 算是什么呢
    李白不喝酒:@祈澈姑娘 原生的正在丢失饭碗
    祈澈菇凉:@李白不喝酒 Ionic 是一种强大的混合式hybirdHTML5移动开发框架,集成大量的APP组件,又兼容主流手机系统,是APP开发首选架构。
  • 未卜先:这些只是基本的css框架啊
    祈澈菇凉:@未卜先 是的,是一些常见的UI框架
  • 65fee1fc3721:虽然我是一个移动端程序猿,但是闲暇时间看看前端也是不错的选择:stuck_out_tongue_closed_eyes:
  • Little波y:厲害了額我的姐~
  • 悟一W:前端女神 能带带小生吗
    祈澈菇凉: @21g_Design 可以相互学习,交流
  • 54be30d2931c:Ionic 不算吗?
  • 贝塔鸟:目前我们的前端团队使用vue+aui感觉产品效果还不错,就是组件太少。css框架关键在于更多的组件。比如framework7,挺好的
  • asce1885:说了这么多,居然不介绍下antd:grin:
  • 想酷却酷不起来:还有饿了么的前端框架
  • Summer_water:活捉前端美女一枚😃
  • c78ef7b432fc:然后,不要迷信vue,请使用react
    c78ef7b432fc: @郭斌勇 angular我也用过,相对于angular来说react更轻,react应该是算是一个库,不能算框架。对于需要经常做业务扩充以及有时需要引入外部组件的我们来说,react更加合适。同时越轻量的东西越容易扩充和被接受,其实看看java那堆orm的发展和ejb的结果就知道。好吧,我tm的现在是全栈,选东西的时候会考虑一堆问题,有时可能想多了。
    科研者: @上下于天 在angular面前,react就有点弱啦!至于vue吧,仿的别人,也没多少创新,更不能理解的是:为了装逼,显得高大上,竟同一篇文章中用好几个人家的概念来表达同一个东西!
    念念不忘_必有回想:可我还是用的angularjs:joy:
  • c78ef7b432fc:快速迭代个性话需求满天的时代,这种玩意就算了,es6,node,npm这些才是王道,形成代码规范,设计规范,结构规范,才是出路。
  • 7090260faa2a:大神求加微信,正在培训前端。js不懂,求带
    祈澈菇凉: @rocky翟看我的主页简介,里面有
    7090260faa2a:@祈澈姑娘 po个微信号大神,
    祈澈菇凉: @rocky翟 这个可以有,共同进步
  • be3e836dafb4:我是进来看美女的,不过也可以打打王者:smirk::smirk:
    祈澈菇凉: @JJ阳 王者峡谷见咯
  • E喵蜀黍:😶好厉害。。。
  • keknei:还是研究es6,node,npm,webpack才是王道,这些UI框架,讲真,很多用不上,也不会给自己提分,css的话,less也不错,开发也挺快,维护也方便,不过能集全这么多UI框架,可见楼主也是蛮费心的
    祈澈菇凉: @keknei 这些差不多相当于一个工具,主要是提高开发的速度,最近也在研究那些进阶的东西
  • 咕噜的milk:发现简书里面的程序猿大神好多🙃
    学计算机的我真的打开了新世界的大门
    祈澈菇凉: @咕噜的milk 这个社会程序员越来越多了
  • 33f3376c65d1:不错:+1: 我有增长了知识
  • 7e4336b58cd3:总结这么多,你用的有哪些🤓
    祈澈菇凉: @ChaosSoong 比较熟悉的1.3.5.7.8.12
  • 敏敏丶特穆尔:感觉你好腻害啊,我框架都没怎么接触过。还是一个小渣渣
    祈澈菇凉: @一个丶好人 工作之余,有时间就总结了一下
  • Farewell_V587:厉害了:hushed:
  • 她是我的bug:会前端的女生,都是小仙女
    祈澈菇凉: @蜗牛不牛 😂
  • 主策执封:楼主,我现在想学UI却没有引路人只能在网上碰灰,有什么办法吗。或者有个师傅
    祈澈菇凉: @主策执封 小师傅不敢当,可以邀你进我们的前端小伙伴群,分享资料
    主策执封:@祈澈姑娘 其实我在培训,但是不喜欢后台,比较喜欢前端和UI,能做我小师傅吗?:smile:
    祈澈菇凉: @主策执封 你学的是UI设计还是前端呀
  • 19ef327156cd:学过一半 现在在学vue没学懂
    24a14d145354:@bxxgz 原生vue用起来太别扭了,反人类的设计,框架封装一下比较好,最重要的是理解vue的生命周期。
  • 我的昵称好听吗:哇哦,小姑凉好厉害啊,收我做徒弟吧!
    祈澈菇凉: @DIEW_fb94 哈哈,大哥,你还是在王者当我徒弟吧
  • 土豹子123:很不错:+1: 最好每一个框架 带点demo事例会更好
  • 339d9646882c:vue呢。。。
    祈澈菇凉: @杨浩零嗯,你说的对
    杨浩零:楼主总结的是UI框架, vue 好像不是UI方面的吧!
    祈澈菇凉: @胡琴咿呀渔光寂 那三大框架相对比较复杂,就木有写上去了
  • 6ad457ff3fcf:请问有总结js框架的美文吗?😁
    祈澈菇凉: @Felix_俊锴Concern 已更新哦
    6ad457ff3fcf: @祈澈姑娘 期待😋
    祈澈菇凉: @Felix_俊锴Concern 正在总结中
  • 清泉石上流521:一脸懵逼:sleepy:
  • 最怕认真:收藏的,请问你还会第二次翻出来?请不要骗自己老哥
    祈澈菇凉: @最怕认真 工作中经常用到,直接拿模板过来就可以了
  • MR_LCY:不错不错 历害 很用心噢 收藏加关注 哈哈 工作中用
    祈澈菇凉: @MR_LCY 谢谢😜
  • ankyliu:zui,基于bs,可以一战!
  • 至简从心:其实我啥都不懂,但是作为妹纸搞这个,厉害啦。
    祈澈菇凉:过奖咯
  • 48c52281ab81:挺齐全的,部分用过!
    祈澈菇凉:@叫我丶英雄 花了一番功夫总结的,希望对您有所帮助
  • NN又回来了:谢谢,收藏了!我来占第一楼!
    祈澈菇凉:哈哈,不客气

本文标题:进阶攻略|前端最全的框架总结

本文链接:https://www.haomeiwen.com/subject/nrxirxtx.html