web前端ui框架-webapp前端框架 收藏 0

前端工具：常用的Web前端ui框架汇总

elementui应该是大家用的最多的和最常见最稳定的ui框架，那么除了elementui还有哪些好用的框架呢？

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。官网地址：http://amazeui.shopxo.net/javascript/modal/

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。官网地址：https://weui.io/#button_default

官网地址：http://mint-ui.github.io/docs/#/

基于浏览器端原生态模式，面向全层次的前后端开发者，易上手且开源免费的 Web 界面组件库官网地址：https://layuion.com/docs/

基于Vue.js的一个UI框架，主要用PC端，组件比ElementUI更丰富。View Design基于 Vue.js 3 的企业级 UI 组件库和前端解决方案，为数万开发者服务。官网地址：https://www.iviewui.com/

Naive UI 是一个 Vue3 的组件库。全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接。有超过 80 个组件，希望能帮你少写点代码。顺便一提，它们全都可以 treeshaking。尽力让它不要太慢。至少 select、tree、transfer、table、cascader 都可以用虚拟列表，整体使用感受还是很好的，全局配置化，减少很多无用代码。官网地址：https://www.naiveui.com/zh-CN/os-theme/docs/introduction

一个由蚂蚁金服开源出来的企业级后台前端UI框架，目前有Vue和React等版本。使用感受：react版本比vue版本好用稳定，vue版本可能是改造的原因，用起来有一些不方便，包括tree的虚拟加载都没有更新，react版本比较丰富，这个组件推荐配合react使用。vue版本官网地址：https://2x.antdv.com/components/form-cn/react版本官网地址：https://ant.design/components/button-cn/

用于移动端开发，学习成本较高，版本好多，选择的时候需要慎重，各种适配的版本，Ionic 是一个轻量的手机 UI 库，具有速度快，界面现代化、美观等特点。为了解决其他一些 UI 库在手机上运行缓慢的问题。官网地址：http://www.ionic.wang/native_doc-index.html

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台，如果要做微信小程序uni-app配合微信开发者文档还是蛮香的，另一篇文章有具体入门进阶介绍。官网地址：https://uniapp.dcloud.net.cn/

以上就是今天的分享，希望对大家有帮助哦！

做WEB前端开发需要了解的11大前端框架

做前端开发需要了解的11大前端框架，这些框架有些可以帮助你提高效率，有的可以让你学习，有助于更好的了解前端的技巧和经验。

Bootstrap

Bootstrap的用法及其简单(这也可能就是Bootstrap作者阅攻城士无数，了解他们痛的结果)，以至于是个小前端都可以快速上手，几乎没什么学习成本。

官网：http://getbootstrap.com/

Github：https://github.com/twbs/bootstrap/

AmazeUI

按照官方的话说就是“基于社区开源项目构建的一个跨屏前端框架，以移动优先，从小屏到大屏，最终实现所有屏幕适配，适应移动互联潮流”。但其实我就是看中它号称能解决国内浏览器存在的跨屏适配和兼容性问题的技术问题。

官网：http://amazeui.org/

Github：https://github.com/amazeui/amazeui

FrozenUI

其中QQ会员前端就是用的FrozenUI，并且这套框架开源，欣喜若狂耐不住心里的寂寞直接上手三下五除二试了一遍，初体验的就是基础样式效果简单色调清爽，有个比较活跃的社区所以组件什么的也比较丰富。

Github：https://github.com/frozenui/frozenui

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

WeUi

第四个是同FrozenUI差不多的WeUi了，也是一个比较专一的框架，应该说比前者更专一，话说连个官网都不搞，所有答疑都在gitHubIssues解决了，这个框架极其简单，体积当然就不用说了，模块也就7个左右，不过虽然小做的却不错

Github：https://github.com/weui/weui

DEMO：http://weui.github.io/weui/

Quickly

故名思议 快，天下武功无坚不摧，唯快不破，代码如是。quickly提供了必要的css样式重写，以及常用类，还有一些常用组件，它很小，不过栅格系统、表单、表格、按钮、文字等一个都不少，非常适合项目的二次开发。

Gitee：https://gitee.com/qietuwang/quickly

DEMO：http://www.qietu.com/quickly/

SUI

“SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。通过SUI，可以非常方便的设计和实现精美的页面”。果然还是直接引用官方给的枯燥无味广告要节省自己的脑细胞(囧…)，当然了就像广告说的如果你之前用过Bootstrap，那么可以轻松转向SUI，这可能就是淘宝给前端屌丝们的福利了。

Github：https://github.com/sdc-alibaba/sui

官网：http://sui.taobao.org/sui/docs/index.html

AUI

第六个是最近刚起来的AUI，虽然作者声称是专为APICloud开发者设计的一套UI框架，但实际它还是解决了很多移动前端开发的普遍问题，是主要面向混合开发的CSS框架。看起来作者比较猖狂，各种高级CSS3遍地使用，这也使得我不得不去查查这些个CSS3的兼容性。不负众望果然选的都是兼容不错的属性，哈哈了一顿激动从前辈手上大胆认识了几个好东西，并且框架还提供了聊天界面、计数列表等组件，解决了很多复杂的让我骂娘的布局，现在可以直接拿走就用。

Github：https://github.com/liulangnan/aui

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

MUI

这个框架给我的吸引之处就是它的UI是以IOS为主体设计的，当然它也补充了android特有UI样式。并且MUI官方声称用来开发APP还能够提高用户使用流畅度，然后便试着了解和使用一段时间。

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

Github：https://github.com/dcloudio/mui

SemanticUI

UI上跟Bootstrap没太多的区别，不过代码命名规范上却相差甚大，我自认为SemanticUI是不是就是想做的不一样的出来，它的命名全是采用复合的方式，类名特别的离散，用的时候你得很小心自己扩展或者新增的class命名与它的类名冲突。

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

Github：https://github.com/semantic-org/semantic-ui/

Foundation

Foundation算是框架界的元老啦，都说框架去的早，而这个框架一直到现在依然这么的热门，如果你比较介意Bootstrap开发撞脸的尴尬事情，那么你可以考虑使用Foundation这个即使你使用预定义的UI元素,也不会与其他网站太像，就像官方说的给开发者更灵活的框架体验。

官网：http://foundation.zurb.com/

Github：https://github.com/zurb/foundation-sites

Pure

框架小巧，并且是纯CSS，没有太多的牵扯，好用来与其他框架快速结合使用。

官网：http://purecss.io/

Github：https://github.com/yahoo/pure/

号称不用写JS代码的前端框架，你愿意尝试吗

  大家好，我是为广大程序员兄弟操碎了心的小编，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标！

  众所周知,jQuery EasyUI是比较流行的前端框架，适用于企业信息系统或网站后台管理，随着IE所占市场份额越来越小，EasyUI的兼容性也越来越强，但在开发过程中，对于EasyUI稍微复杂的组件功能，大多需要通过手写JS代码实现，因此增加了开发难度，降低了开发效率。

  今天小编推荐一款前端框架，是基于新版jQuery EasyUI构建，该框架TML调用功能组件，不用写JS代码，可以专注你的后端业务开发！

  使用 Apache-2.0 开源许可协议

• TML调用组件：通过对EasyUI功能组件的深度封装及扩展开发，可以使用TML调用功能组件，致力于打造不用写JS代码的EasyUI，既有EasyUI的强大功能，又有定制的美观界面。
• 扩展常用的组件：整合功能强大的第三方常用组件，如富文本编辑器ueditor、图表组件echarts、上传组件webuploader，还有自主研发的自动完成、数据过滤、组合查询、数据导入、导出等。
• 完美兼容第三方UI：采用iframe布局，可以完美兼容第三方UI框架，如bootstrap、layui等，不会出现因样式冲突而导致页面元素错位等问题。同时引入了Font Awesome字体图标替换EasyUI的原生图标。
• 标准Json接口数据：所有数据均采用标准的json数据，通过API的方式调用数据，一套后台，可同时满足前端调用，移动端APP数据调用及第三方系统调用，真正实现一源多端的数据提供模式。

整合组件

• EasyUI v1.8.6
• jQuery v1.12.4
• Bootstrap v3.3.5
• Font Awesome 4.7.0
• Echarts v3.5.3
• Ueditor v1.4.3.3
• WebUploader v0.1.5

拓展组件

• 图形报表
• 富文本编辑器
• 附件上传
• 主子表关联
• 提交表格数据
• 可编辑表格
• 查找带回
• 自动完成
• 多级联动
• 动态联动
• 多项选择
• 按钮启动弹窗
• 内页打开Tab页
• 通用过滤及查询
• 通用导入导出
• 其它组件功能

基础表单

图形报表

Tree组件

开关按钮

按钮

分割按钮

image-20210403012244342

分页

进度条

树形下拉框

标签框

选项卡

  本期就分享到这里，我是小编南风吹，专注分享好玩有趣、新奇、实用的开源项目及开发者工具、学习资源！希望能与大家共同学习交流。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com