资源 | 10套好用的前端框架、设计组件库推荐

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: Web、Mobile、和小程序。


No.1  Ant Design UI 框架

 官网地址:ant.design

 体验地址:xcloud.alipay.com

 设计资源包:Download

 Github:github.com/ant-design



解析:蚂蚁金服出品,基于 ReactJS。一个服务于企业级产品的设计体系,支持桌面端、手机端。基于『确定』和『自然』的设计价值观,通过模块化的解决方案,让设计者专注于更好的用户体验。



No.2  Element UI 框架 

 官网地址:element.eleme.io

 设计资源包:Download

 Github:github.com/elemefe



解析:饿了么出品,基于 VueJS、React、Angular。一套为开发者、设计师和产品经理准备的桌面端组件库。



No.3  Bootstrap 框架

 官网地址:getbootstrap.com

 案例展示:expo.getbootstrap.com

 Github:github.com/twbs/bootstrap



解析:Bootstrape 是经典的前端框架。主要是有很多的主题,可以看下案例展示。



No.4  ZUI H5 框架

 官网地址:zui.sexy

 移动端框架:zui.sexy/m

 Github:github.com/easysoft/zui



解析:一套开源 HTML5 跨屏框架,基于 Bootstrap 深度定制开源前端实践方案,帮助你快速构建现代跨屏应用。



No.5  Muse UI 框架

 官网地址:muse-ui.org

 Github:github.com/museui/muse-ui



解析:Muse UI 基于 Vue2.0 开发,基本实现了 Material Design 设计规范类的所有组件,另外还开发许多的功能性的组件。



No.6  Foundation UI 框架

 官网地址:foundation.zurb.com

 案例展示:zurb.com/responsive



解析:一套灵活适配于任何设备的框架,可以非常便捷地搭建出好看的可适配网站、Apps和邮件。资源一直在更新,并且有很多 Html 的模板能帮助你快速开始。



No.7  WePY 小程序框架

 官网地址:tencent.github.io/wepy

 Github:github.com/Tencent/wepy



解析:一套让小程序支持组件化开发的框架。WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性,对原生小程序的开发模式进行了再次封装,熟悉 Vue 的你开发起来可以更加得心应手。



No.8  Amaze H5 框架

 官网地址:amazeui.org

 Github:github.com/amazeui/amazeui



解析:Amaze 以移动优先(Mobile first),从小屏逐步扩展到大屏,最终实现所有屏幕适配。相比国外框架,更关注中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。



No.9  ZanUI 组件库

 官网地址:youzanyun.com/zanui

 Github:github.com/youzan/vant



解析:有赞出品,支持移动、PC、小程序。可以看看它的移动端 Vue 组件库 Vant。



No.10  ICE 组件库

 官网地址:alibaba.github.io/ice

 体验地址:alibaba.github.io/ice/#/block

 下载GUI工具:Download

 Github:github.com/alibaba/ice



解析:阿里巴巴出品,基于 ReactJS。海量可复用物料,可以通过 GUI 工具快速构建中后台应用。但据说文档有点坑!所以只推荐设计师看看组件,程序员暂不推荐使用!


-  END - 

 

 西瓜设计研究所

互联网创业 | UI设计 | 开发资源 | 教程

每周一上午9:00推送

未经允许请勿转载,烦请私信作者获取授权

© 西瓜设计研究所

 

相关文章
|
6月前
|
前端开发 API 数据安全/隐私保护
Web前端开发中的跨域资源共享(CORS)解决方案
【2月更文挑战第5天】在Web前端开发中,跨域资源共享(CORS)是一个常见的挑战。本文将探讨CORS的概念和原理,并介绍一些常用的解决方案,包括服务器端配置和前端处理方法,帮助开发者更好地应对跨域请求问题。
264 4
|
6月前
|
前端开发 开发者
前端开发中的跨域资源共享(CORS)解决方案探讨
【2月更文挑战第2天】跨域资源共享(CORS)是前端开发中常见的问题,本文将深入探讨CORS的原理及解决方案,包括简单请求、预检请求以及常用的CORS解决方案,为前端开发者提供深入的理解和应对CORS问题的有效方法。
104 1
|
6月前
|
前端开发 JavaScript API
探索前端开发中的跨域资源共享(CORS)
【2月更文挑战第3天】在前端开发中,跨域资源共享(CORS)是一个至关重要的话题。本文将深入探讨CORS的概念、工作原理以及如何在前端项目中正确配置和处理跨域请求,帮助开发者更好地理解和应用CORS技术。
67 7
|
6月前
|
前端开发 安全 JavaScript
前端开发中的跨域资源共享(CORS)机制
【2月更文挑战第3天】 在前端开发中,跨域资源共享(CORS)机制是一个重要的安全性问题。本文将介绍CORS的概念、原理和实现方式,并探讨在前端开发中如何处理跨域资源请求,以及如何提高网站的安全性。
|
10天前
|
缓存 前端开发 JavaScript
如何优化前端资源
如何优化前端资源
|
2月前
|
缓存 前端开发 JavaScript
|
3月前
|
SQL 数据库 Java
HQL vs SQL:谁将统治数据库查询的未来?揭秘Hibernate的神秘力量!
【8月更文挑战第31天】Hibernate查询语言(HQL)是一种面向对象的查询语言,它模仿了SQL的语法,但操作对象为持久化类及其属性,而非数据库表和列。HQL具有类型安全、易于维护等优点,支持面向对象的高级特性,内置大量函数,可灵活处理查询结果。下面通过示例对比HQL与SQL,展示HQL在实际应用中的优势。例如,HQL查询“从员工表中筛选年龄大于30岁的员工”只需简单地表示为 `FROM Employee e WHERE e.age > 30`,而在SQL中则需明确指定表名和列名。此外,HQL在处理关联查询时也更为直观易懂。然而,对于某些复杂的数据库操作,SQL仍有其独特优势。
57 0
|
3月前
|
缓存 前端开发 JavaScript
【揭秘Rails高手都在用的秘密武器!】—— 资产管道:它是如何悄无声息地改变我们管理前端资源的方式?
【8月更文挑战第31天】资产管道是Ruby on Rails 3.1引入的特性,用于简化Web应用中CSS、JavaScript和图片等前端资源的管理和打包。它将静态资源集中管理并自动处理合并、压缩及版本控制,提升页面加载速度和用户体验。本文通过示例代码详细介绍了如何在Rails应用中配置和使用资产管道,包括创建目录结构、编写样式表和JavaScript文件以及在布局文件中引用静态资源。与传统方法相比,资产管道提供了更高效和自动化的解决方案,有助于提高开发效率和应用性能。
28 0
|
4月前
|
资源调度 前端开发 JavaScript
如何用 Bower 管理前端资源:提升开发效率与项目维护性
【7月更文挑战第2天】**Bower**是基于Node.js的前端包管理器,用于高效管理JavaScript库、CSS和HTML模板等资源。通过安装、配置、搜索、安装、更新及卸载组件,它帮助开发者保持依赖的一致性,提升开发效率。配置`.bowerrc`设定安装目录,`bower.json`记录依赖。遵循最佳实践,如定期更新、锁定版本和清理无用组件,能增强项目维护性。尽管有新工具出现,掌握Bower仍是前端开发基础。
137 0
|
6月前
|
SQL 机器学习/深度学习 前端开发
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站
10个宝藏级编程资源,让你省下8K学费不香吗_类似javaguide的前端网站