十大常用web前端UI组件库,赶紧收藏

news2025/7/9 20:17:46

今天主要介绍web前端常用的UI库,这些网站基本都是背靠互联网大厂,值得web前端开发者收藏,当然还是要多多学习使用。

Vant

一款有赞出品轻量、可靠的的移动UI组件库,目前支持 Vue2、Vue3、React,微信和支付宝小程序,并由社区团队维护 React 版本和支付宝小程序版本。
官网的文档清晰易懂,如果你熟悉vue.js的组件化开发,上手非常容易。
在这里插入图片描述

Ant Design

Ant Design是一套企业级 UI 设计语言和 React 组件库,提供了一套非常完整的组件化设计规范与组件化编码规范,能大幅提高了部分产品的设计研发效率及质量。

PC端组件库文档中的设计原则写的比较完善,并且每个组件都描述了何时使用,让其对组件有更深的认识,提供的设计资源也是非常完善,值得web前端企业开发者们收藏!
在这里插入图片描述

Ant Design Mobile

Ant Design 移动端设计规范,一个基于 Preact/React/React Native 的 UI 组件库。新版样式比较好,文档更新的也好用起来了
在这里插入图片描述

Bootstrap

Bootstrap 是全球受欢迎的前端开源工具库,Bootstrap4中文文档这个 UI 库来自 Twitter 的成员,拥有了box-flex布局等更新,但是组件比较少,特点是提供了很多工具类;需要引入 JQuery,如果有自己特殊的需求,就需要重新定制样式。

Flat UI是基于Bootstrap做的Metro化改造,由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件,但是外观更加漂亮。
在这里插入图片描述

Layui

经典开源模块化前端 UI 框架(官方文档镜像站),JQuery 时代很好的 UI 库,是一套开源的 Web UI 解决方案,其内部采用的是自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。
在这里插入图片描述

ElementUI

出自饿了么前端团队,学 Vue 的童鞋们必用的一款 UI 库,采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型,也支持有 Angular 和 React 的版本,Element Plus 支持 Vue3。
在这里插入图片描述

semi design

出自字节跳动抖音前端与 UED 团队,是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案,可用于快速搭建美观的 React 应用。
在这里插入图片描述

Taro UI

出自京东凹凸实验室,基于 Taro 的多端 UI 组件库,提供友好的 API,可灵活的使用组件,一套组件可以在 微信小程序、H5、ReactNative 等多端适配运行。
在这里插入图片描述

Vuetify

Vuetify 是建立在Vue.js之上的完备的界面框架。 该项目的目标是向开发人员提供他们积累的丰富且吸引用户体验所需的工具。 Vuetify从一开始就设计为易于学习的并且拥有来自 Material设计规范的数百个精心设计组件。每一个组件都经过精心设计,具有模块化、响应式和优秀的性能。
在这里插入图片描述

WeUI

WeUI ——微信官方的 UI 库,一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406356.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue基础语法知识(自用,完整版)

Vue基础语法知识 1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2、root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3、root容器中里的代码被称为【Vue模板】 4、Vue实例和容器是一一对应的 5、真实开发…

手机+PC电脑如何使用油猴插件和油猴脚本?

一、移动端使用油猴脚本 移动端可以不使用油猴插件,就可直接安装脚本(需要浏览器支持),这样天然支持油猴脚本的移动浏览器还是很多,比如:书签地球、X浏览去、M浏览器等,但是各个浏览器的支持情…

前端Vue项目部署到服务器过程,以及踩坑记录

目录 需求 过程 踩坑 nginx服务器404错误的原因 404 Not Found nginx服务器500错误的原因 500 Internal Server Error nginx反向代理 需求 前后端完成项目后,需要部署到本地的服务器上。 第一次部署,以下是从0开始慢慢学着弄的详细过程 过程 …

大白话理解-微信小程序获取授权

学习目录 微信小程序前端直接获取授权微信为什么要授权微信怎么授权?微信登录微信小程序前端直接获取授权 微信为什么要授权 微信用户授权,才可以操作微信官方的某些接口。简单来说就是:微信定义了很多接口,然后他们认为有一部分是涉及到用户使用安全的,所以把这一部分划…

Python 爬虫案例

一、用cookie池模拟登录 在网络请求交互中,为了维持用户的登录状态,引入了cookie的概念。当用户第一次登录某个网站时,网站服务器会返回维持登录状态需要用到的信息,这些信息就称为cookie。浏览器会将cookie信息保存在本地计算机…

微信小程序(分包)

文章目录分包概念作用分包后的项目构成分包的加载规则分包的体积限制配置方法小程序打包原则引用原则独立分包分包预下载分包 概念 分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需…

解决报错:Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)

在做vue2项目时出现如下错误,页面空白且控制台出现如下错误: 报错内容: Uncaught TypeError: Cannot read properties of undefined (reading install) at Vue.use (vue.runtime.esm.js?c320:5709:1) at eval (index.js?5aa4:7:1…

Http请求-hutool工具类的使用

Http请求-hutool工具类的使用 前言 在日常java后端开发的工作中经常会遇到后端发起HTTP请求的情况,这里可以使用一个简单的工具类。 官方网址:Http请求-HttpRequest (hutool.cn) 介绍 本质上,HttpUtil中的get和post工具方法都是HttpRequ…

【小程序从0到1】首页布局案例的实现

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥React/小程序React/小程序React/小程序&am…

let、const和var的区别(涉及块级作用域)

let 、const和var的区别 let、const、var在js中都是用于声明变量的,在没有进行ES6的学习前,我基本只会使用到var关键字进行变量的声明,但在了解了ES6之后就涉及到了块级作用域以及let,const了。 let与const let是用于替代var来…

Java实现本地缓存、分布式缓存及多级缓存

以下均为自己参考其它博主文章或自己理解整理而成,如有错误之处,欢迎在评论区批评指正! 0. 缓存简介 像MySql等传统的关系型数据库已经不能适用于所有的业务场景,比如电商系统的秒杀场景,APP首页的访问流量高峰场景&a…

火爆全网的人工智能真的有那么强嘛?

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言&#x1f4d…

Element-UI中的表单验证

Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。   Element为vue-cli 准备了相应的 Element 插件,开发者可以用它们快速地搭建一个基于 Element 的项目,不仅能够快速体验交互细节,还可以使用前端框架封装的代…

Spring AOP 切面增强

背景背景:我们在开发过程中,经常需要做些周边功能: 性能统计、日志、事物管理。我们需要考虑如何解耦这些周边功能开发和核心业务开发区分开达到提升代码质量目的。定义在AOP思想里面定义周边功能定义是(性能统计、日志、事务管理…

两种方案解决ERROR in Conflict: Multiple assets emit different content to the same filename index.html 的问题

Ⅰ、所遇问题简述: 1、问题描述: 在用 vue-cli 正常来创建新的基于 vue2 框架 的项目,在安装好 node-modules 之后,运行命令 ‘npm run serve’ ,报错情况如下: ERROR in Conflict: Multiple assets emit different…

用Pytorch构建第一个神经网络模型(附案例实战)

本文参加新星计划人工智能(Pytorch)赛道:https://bbs.csdn.net/topics/613989052 目录 一、Pytorch简介 二、实验过程 2.1数据集介绍 2.2加载数据 2.3数据预处理 2.3.1特征转换 2.3.2缺失值处理 2.3.3样本不平衡处理 2.4特征工程 2.4.1划分训练集和测试集 …

Unity 插件篇 ✨ | 受击插件Feel 详细教程,开发游戏时更好的操控 游戏打击感

🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN🙉 🎄 学习专栏推荐:Unity系统学习专栏 🌲 游戏制作专栏推荐:游戏制作 &…

同态加密详解

什么是同态加密 同态加密(Homomorphic Encryption)是指将原始数据经过同态加密后,对得到的密文进行特定的运算,然后将计算结果再进行同态解密后得到的明文等价于原始明文数据直接进行相同计算所得到的数据结果。 同态加密与一般加…

与C知道的第一次亲密接触

chatG.P.T没向大陆地区开放服务,如要注册除了要邮箱,还要一个已开放服务国家的电话号来接受验证,于是果断放弃注册。还好,CSDN官网提供过网页版的类似聊天机器人,现只在CSDN APP上才有入口。而且现在改名为“C知道”&a…

MQ-2烟雾传感器的使用

一、MQ-2烟雾传感器简介 MQ-2烟雾传感器采用在清洁空气中电导率较低的二氧化锡(SnO2),属于表面离子式N型半导体。当MQ-2烟雾传感器在200到300摄氏度环境时,二氧化锡吸附空气中的氧,形成氧的负离子吸附,使半导体中的电子密度减少&a…