您的当前位置:首页>全部文章>文章详情

【前端】2023年最流行的10款前端UI框架排名

CrazyPanda发表于:2023-12-06 18:59:14浏览:409次TAG:
       
上次我们发布了《2022年最流行的11款PHP框架》,争议很大!
今天我们来继续探讨一下:2023年最流行的10款前端UI框架排名。
一:前端UI框架是什么?
前端UI框架是一种基于HTML、CSS、JavaScript等前端技术的开发工具集,提供了一系列的UI组件、样式、布局等基础功能,使得前端开发人员可以更加高效地开发出具有良好用户体验的Web应用。

b5a77db0cdbd436188c23d52d8838748.png

二:为什么要使用前端UI框架?
前端UI框架可以大大减少前端开发人员的工作量,提高开发效率,同时也能够保证Web应用的视觉效果和交互体验的一致性。

a0bf9ceb265bed8ce2cba0290fc3037.png

三:2023年国内最流行的前端UI框架有哪些? 

1、Element Plus : 由饿了么团队开发,是目前流行度很广的一款前端UI框架,非常优秀!基于全新的Vue3(当然也有Vue2版本),提供了丰富的UI组件和样式,性能和开发体验都非常棒,可以帮助开发者快速构建现代化的UI界面,非常适合初学者学习和使用。

dab78faf134657d0026c02ee04fb638.png

官方地址:

https://element-plus.gitee.io/zh-CN/

php中文网即将开班的第24期PHP线上班《Vue3+ThinkPHP6 前后端分离的大型电商项目》,选择的就是 Element Plus 前端UI框架。

6e8c96c55a6b56fdec3b577b4162b59.png

Tips:php中文网第24期《php小白到大牛必经之路》线上直播班,将于2023.5.18号开班!

2、Ant Design:由阿里巴巴蚂蚁金服前端团队开发的一款基于React的组件库,提供了丰富的UI组件和样式,支持定制化和国际化,适用于企业级应用的开发。

23f6df5a72a37c02a8cb716726ccdd5.png

官方地址:

https://ant.design/index-cn

https://github.com/ant-design/ant-design

3、Ant Design Vue:是一个基于Vue.js的UI组件库,是Ant Design的Vue版本,也是一个非常优秀的前端UI框架,适合Vue.js开发者使用,可以满足各种不同的UI设计需求。

8ac3df6794bee1341ebde757d24ecb8.png

php中文网第18期线上班实战项目用的就是 Ant Design Vue,学员们反馈还不错!

官方地址:

https://github.com/vueComponent/ant-design-vue

4、Navie UI:前端框架Vue.js作者尤雨溪推荐的一款UI框架,组件设计比较精美,组件库比较丰富,主题可调,基于全新的Vue3,没有Vue2版本,TypeScript可用。完全免费,更新维护的效率非常高。个人感觉:UI设计丰富且流行,还有点炫酷。

29ebec174feaab2b1180290005b9478.png

官方地址:

https://www.naiveui.com/zh-CN/os-theme

https://github.com/tusen-ai/naive-ui

5、View UI Plus:基于最新的Vue3,TypeScript可用。组件丰富,设计简洁、精美,它比较适合数据型、表格型众多的系统,像企业ERP系统,另一个就是它在移动端展示的效果也比较理想,平时我们做响应式布局,PC端和移动端共用一套代码的时候,它是个不错的选择。

382b807cccda9e4ac12b593c7e70f14.png

官方网地址:

https://www.iviewui.com/

https://github.com/view-design/ViewUIPlus

6、Vant:由有赞团队开发的一款基于Vue.js框架的轻量级移动端UI框架,提供了轻量级的UI组件和样式,适用于快速构建移动端Web应用。

b1ba7e7a7d0cce9d53d0d5cbe39c5e0.png

官方地址:

https://vant-contrib.gitee.io/vant/#/zh-CN

https://github.com/youzan/vant

7、LayUI:这是一款非常有情怀的UI框架,前端大神贤心倾情开发。UI设计简洁精美,风格简约轻盈,个人感觉是看起来最舒服的UI组件库,很多网站在用,包括php中文网。

b9c64698d5a5ca1e2f0be999a90f713.png

可惜的是它是基于jQuery的,没有Vue版本,官网也已经下线,迁移到了gitee。
以下是在gitee的官方地址:

https://gitee.com/layui/layui

另外在php中文网有保存镜像:
https://www.php.cn/doc/layui/

8、layui-vue:如果你喜欢Layui的UI设计,又在用Vue3,可以尝试一下第三方开发的:layui-vue,仿Layui设计,支持Vue3。

00250f42926b516bfa0c62ea75e4f73.png

官方地址:

http://www.layui-vue.com/zh-CN/index

9、Bootstrap:由Twitter团队开发的一款基于HTML、CSS和JavaScript的前端框架,提供了响应式布局和丰富的UI组件。

7198ab85d319315c7829f9903d3ef7f.png

中文官网地址:

https://www.bootcss.com/

10、WeUI:由腾讯团队开发的一款基于微信设计语言的UI框架,提供了简洁美观的UI组件和样式。

c3ff2103c84b3affdb9f2dd24e6e668.png

官网:https://weui.io/

四:如何考量一款前端UI框架好不好? 
以上几款都非常优秀,开发者要根据具体项目的需求和开发团队的技术水平来选择合适的UI框架。
五:你更喜欢哪种框架?
实际工作开发中,你用的是哪种?有哪些地方值得推荐的?

猜你喜欢

【前端】使用canvas做一个可绘制矩形的画布(带有移动,缩放,删除)
使用canvas做一个可绘制矩形的画布(带有移动,缩放,删除)
发表于:2024-04-07 浏览:356 TAG:
【前端】PHP、Vue和React:如何选择最适合的前端框架?
PHP、Vue和React:如何选择最适合的前端框架?随着互联网技术的不断发展,前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架,每一种都具有其独特的特点和优势。在选择使用哪种前端框架时,开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使用场景,帮助读者更好地选择最适合自己的前端框架。PHPPHP作为一种服务器端脚本语言,被广泛应用于Web开发中。尽管PHP主要用于后端开发,
发表于:2024-03-16 浏览:375 TAG:
【前端】全栈软件开发工程师需要具备哪些技能
全栈软件开发工程师需要具备前端、后端和数据库等多方面的技能,以便能够在整个应用开发周期中承担各种任务。以下是典型的全栈软件开发工程师的技能栈:一、前端技能:1.HTML/CSS/JavaScript:构建网页的基本技能,负责页面结构、样式和交互。2.前端框架:掌握至少一种前端框架,如 React.js、Vue.js、Angular,用于构建可维护的、高性能的前端应用。3.前端工具:使用构建工具(Webpack、Parcel)、包管理工具(npm、Yarn)、代码规范工具(ESLint、Prett
发表于:2023-12-07 浏览:343 TAG:
【前端】Nodejs基于Windows安装教程
一、安装环境在进行 Node.js 环境的安装之前,您需要先安装并配置好以下环境:操作系统:Windows命令行工具:Node.js 是通过命令行工具进行使用和管理的,因此您需要选择一个适合您的命令行工具。在 Windows 上,您可以选择使用命令提示符(cmd)或 PowerShell。文本编辑器:Node.js 应用程序通常是使用文本编辑器编写的,因此您需要选择一个适合您的文本编辑器。常用的文本编辑器包括 Visual Studio Code、Sublime Text、Atom 等。网络连接
发表于:2024-07-15 浏览:234 TAG:
【前端】vite+vue3+ts 项目安装 Ant Design of Vue方法
安装 Ant Design of Vue 和@ant-design/icons-vue图标库npm add ant-design-vue @ant-design/icons-vue安装插件 unplugin-vue-components 配合vite可以自动帮我们引入组件npm add unplugin-vue-components -D配置 vite.config.tsimport {&nbs
发表于:2024-02-23 浏览:313 TAG:
【前端】常用CMS网站框架介绍
内容管理系统(Content Management System)简称为CMS,CMS系统是网站建设走向成功的重要组成部分。目前网络上的内容管理系统比较繁杂,想要找一个优秀而又非常适合的管理系统也是一件很不容易的事情。国内和国外的CMS程序都比较多,如国外的WordPress在站长圈名气很大。这里,尹华峰SEO技术博客主要介绍十款国内常见的优秀内容管理系统,很多还是开源程序,方便各位站长二次开发满足不同的需求。一、织梦CMS织梦CMS就是dedecms,很多站长称呼它为得得cms,是目前国内安装
发表于:2024-04-24 浏览:337 TAG:
【前端】支付宝和微信小程序普通二维码跳转二合一
业务需要:系统支持微信小程序和支付宝小程序,现在要扫码跳转到对应小程序,要使用一个二维码,并能携带业务参数,用户使用微信扫码,就能打开微信小程序并获取参数,使用支付宝扫码,就能打开支付宝小程序,并获取参数一、 微信小程序普通二维码跳转实现1、在微信公众平台-开发管理-开发设置中找到【扫描普通链接二维码打开小程序】去配置二维码链接地址2、配置要求二维码规则:配置为二维码对应的链接,其中最后要加/,这样才可以动态传参。扫描后面参数不同的二维码都能跳转。这样类似与测试链接中 https:
发表于:2024-03-07 浏览:275 TAG:
【HTML】html使用高德地图设置考勤范围
需求:系统需要考勤功能,并在WEB端设置考勤范围,用于员工手机端再次范围内打卡签到,WEB端需要设置考勤地点以及考勤范围。1 使用高德地图开发首先需要再高德开放平台注册账号,并创建应用,获取高德地图key以及安全秘钥这里需要用到地图定位,一级地理坐标转换,使用高德开放平台JSAPI开发。HTML引入js,安全秘钥配置一定要写在js上方:<script>     window._AMapSecurityConfig = { &
发表于:2024-02-07 浏览:359 TAG:
【HTML】箩筐地图的使用,设置考勤范围
接上篇【PHP】html使用高德地图设置考勤范围,项目换掉了高德地图,替换成了箩筐地图,继续实现考勤打卡范围设置。需求:系统需要考勤功能,并在WEB端设置考勤范围,用于员工手机端在此范围内打卡签到,WEB端需要设置考勤地点以及考勤范围。 上篇高德地图已经实现了此功能,现在要换成箩筐地图实现此功能 基本思路:绘制地图->根据地址获取坐标->根据坐标绘制圆形范围->根据半径自适应显示圆形范围1 箩筐地图箩筐地图开放平台https://testlbs.luokuang.com/ 同样
发表于:2024-02-07 浏览:865 TAG:
【前端】vite和webpack的区别是什么
区别:1、webpack服务器启动速度比vite慢;由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。2、vite热更新比webpack快;vite在hrm方面,当某个模块内容改变时,让浏览器去重新请求该模块即可。3、vite用esbuild预构建依赖,而webpack基于node。4、vite的生态不及webpack,加载器、插件不够丰富。本教程操作环境:windows7系统、vue3版,DELL G3电脑。写在开头最近的vite比较火,而且发布了2.0版本,v
发表于:2024-04-18 浏览:359 TAG: