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

CrazyPanda发表于：2023-12-06 18:59:14浏览：515次TAG：

上次我们发布了《2022年最流行的11款PHP框架》，争议很大！

今天我们来继续探讨一下：2023年最流行的10款前端UI框架排名。

一：前端UI框架是什么？

前端UI框架是一种基于HTML、CSS、JavaScript等前端技术的开发工具集，提供了一系列的UI组件、样式、布局等基础功能，使得前端开发人员可以更加高效地开发出具有良好用户体验的Web应用。

二：为什么要使用前端UI框架？

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

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

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

官方地址：

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

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

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

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

官方地址：

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设计需求。

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

官方地址：

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

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

官方地址：

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

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

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

官方网地址：

https://www.iviewui.com/

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

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

官方地址：

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

https://github.com/youzan/vant

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

可惜的是它是基于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。

官方地址：

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

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

中文官网地址：

https://www.bootcss.com/

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

官网：https://weui.io/

四：如何考量一款前端UI框架好不好？

以上几款都非常优秀，开发者要根据具体项目的需求和开发团队的技术水平来选择合适的UI框架。

五：你更喜欢哪种框架？

实际工作开发中，你用的是哪种？有哪些地方值得推荐的？

猜你喜欢

: 【前端】html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图; echarts的3D地图实在太丑了，还一堆bug使用阿里的Antv可视化库L7，实现3D地图，底图是mapbox 参考示例：https://l7.antv.antgroup.com/zh/examples/polygon/3d#floatMap如果不需要底图样式，可把Scene的style设置为blank 直接上代码了，vue的就不说了，项目是html的mapbox依赖<script src='https://api.mapbox.com/mapbox-gl-js/v2.; 发表于：2024-01-18 浏览：448 TAG：

: 【前端】微信小程序推送订阅消息; 业务需要，商城类小程序，要在用户下单支付成功后，推送消息通知用户。首先想到的是小程序模板消息，微信公众号模板消息已经用过很多了，小程序模板消息确是第一次做。小程序模板消息     参考https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html 小程序模板消息在2020年已经改版了，现在推送模板消息都会推送到服务通知里面，; 发表于：2024-03-21 浏览：353 TAG：

: 【前端】使用canvas做一个可绘制矩形的画布（带有移动，缩放，删除）; 使用canvas做一个可绘制矩形的画布（带有移动，缩放，删除）; 发表于：2024-04-07 浏览：359 TAG：

: 【Html】H5跳转支付宝小程序的两种方式; H5跳转支付宝小程序的两种方式，第一种方式还可以打开支付宝生活号网页，只是换成appid换成网页应用appid，page参数换成url参数，url对应的是自己页面的链接; 发表于：2024-03-28 浏览：360 TAG：

: 【前端】Ant Design of Vue安装; 关于 ant-design-vue #众所周知，Ant Design 作为一门设计语言面世，经历过多年的迭代和积累，它对 UI 的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，也是 React 开发者手中的神兵利器。希望 ant-design-vue 能够让 Vue 开发者也享受到 Ant Design 的优秀设计。ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步，组件的 html 结构和 cs; 发表于：2024-04-15 浏览：312 TAG：

: 【前端】JavaScript判断数组对象是否含有某个值的方法（6种）; 【JavaScript基础语法】web前端判断数组对象是否含有某个值的方法（6种）知识回调场景复现实现方式（6种）利用循环遍历数组元素利用some，filter方法利用array.indexOf方法利用array.includes方法利用array.find方法利用set中has方法本期小结知识回调文章内容文章链接vue3 antd table表格的增删改查（一）input输入框根据关键字搜索【后台管理系统纯前端filter过滤】https://blog.csdn.net/XSL_HR/arti; 发表于：2024-02-23 浏览：350 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 浏览：316 TAG：

: 【HTML】 html 初始化执行方法; HTML的初始化执行方法有多种。以下是其中几种常见的方式：  1. JavaScript的DOMContentLoaded事件：当页面加载完成并且所有元素都已经被创建时，会触发该事件。可以通过在JavaScript文件或者内联script标签中编写相应的函数来处理这个事件。示例如下：document.addEventListener("DOMContentLoaded", function() { // 在此处添加需要执行的代; 发表于：2024-02-07 浏览：411 TAG：

: 【前端】微信小程序跳转公众号的三种方式;  最近因为项目需要，要在小程序页面添加按钮，点击跳转公众号对应页面，目前没有直接点击按钮从小程序跳转到公众号页面的方法，但也有变相的实现方法，最后采用小程序webview内嵌公众号页面的方法来实现相关功能，在此记录一下：相关参考：小程序跳转公众号的三种方法 | 微信开放社区 (qq.com)开放能力 / official-account (qq.com)方法: 1:  公众号组件<official-account></official-account>; 发表于：2024-03-20 浏览：313 TAG：

: 【前端】快速了解 ES6 新增字符串方法，开箱即用（含案例）; 文章目录📋前言🎯includes() 方法🎯startsWith() 方法🎯endsWith() 方法🎯repeat() 方法🎯padStart() 方法🎯padEnd() 方法🎯trim() 方法🎯trimStart() 或 trimLeft() 方法🎯trimEnd() 或 trimRight() 方法🎯replaceAll() 方法🎯slice() 方法🎯substring() 方法🎯split() 方法🎯charAt() 方法🎯charCodeAt() 方; 发表于：2023-12-10 浏览：326 TAG：

栏目分类全部>