前端:2024年非常受欢迎非常火的 VueUI 库

dingcho 2024-08-03 09:33:02 阅读 99

目录

1、iView | 参考地址

2、Vux UI | 参考地址

3、Element UI | 参考地址

4、Mint UI | 参考地址

5、Bootstrap | 参考地址

6、Ant Design Vue | 参考地址

7、Vue Material | 参考地址

8、Vuetify | 参考地址

9、 Vuesax | 参考地址

10、Buefy | 参考地址 

11、Vant UI | 参考地址 

12、PrimeVue | 参考地址 


我们可以根据自己项目实际情况选择对应框架,所介绍前端框架基本能满足大部分需求,也可以自定义组件

1、iView | 参考地址

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。iView 的组件还是比较齐全的,更新也很快,文档写得很详细。有公司团队维护,比较可靠的 Vue UI 组件框架。iView 生态也做得很好,还有开源了一个 iView Admin,做后台非常方便。官网上介绍,iView 已经应用在 TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。

2、Vux UI | 参考地址

Vux 是基于 WeUI 和 Vue2.x 开发的移动端 UI 组件库,主要服务于微信页面。Vux 的定位已经很明确了,一是:Vue 移动端 UI 组件库,二是:WeUI 的基础样式库。Vux 的组件涵盖了所有的 WeUI 的内容,还扩展了一些常用的组件。比如:Sticky、timeline、v-chart、XCircle。Vux 是个人维护的。但是 GitHub 上 star 还是很高的,达到 13k。在 GitHub 上看到对 issue 的关闭还是很迅速的。Vux 文档基本的组件用法和效果都讲解到位了。在 vux 官网上也展示了很多 Vux 的使用案例。在微信页面开发中,基本没有太多的 bug,开发还是比较顺手的。

3、Element UI | 参考地址

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,如果需要Vue 3.0 可以选择Element Plus。Element 是饿了么前端开源维护的 Vue UI 组件库,更新频率还是很高的,基本一周到半个月都会发布一个新版本。组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富。网上的 Element 教程和文章比较多。Element 应该是一个质量比较高的 Vue UI 组件库。

4、Mint UI | 参考地址

Mint UI 基于 Vue.js 的移动端组件库,同样出自饿了么前端的项目。Mint UI 是真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件。Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。网上的视频教程很多都是基于 Mint UI 来讲的,开发移动端 web 项目还是很方便,文档也很简介明了。很多页面 Mint UI 组件都已经封装好,基本可以照着例子写,简单的调整一下就可以实现。不过,在 GitHub 上看最后一次代码提交在 2018 年 1 月 16 日。不知道是项目比较稳定没有更新,还是项目有被废弃的可能。

5、Bootstrap | 参考地址

Bootstrap 提供了基于 vue2 的 Bootstrap V4 组件和网格系统的实现,完成了广泛和自动化的 WAI ARA 可访问性标记。Bootstrap 4 是最新发布的版本,与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了 40%以上。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持,现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。想当初刚流行响应式网站的时候,Bootstrap 是世界上最受欢迎的建立移动优先网站的框架,Bootstrap 可以说风靡全球。就算放在现在很多企业网站都是采用 Bootstrap 做的响应式。Bootstrap-Vue 可以让你在 Vue 中也实现 Bootstrap 的效果。

6、Ant Design Vue | 参考地址

Ant Design Vue 遵循 Ant Design 设计规范,为设计师提供优质 UI 组件库,多适用于开发和服务企业级的中后台产品,为产品提供更加优良的产品交互与视觉效果

7、Vue Material | 参考地址

UI组件库Vue Material是基于谷歌的Material Design产生,是一款轻量级框架,帮助设计师实现Google像素材料设计,向你提供了适合所有Web浏览器的内置动态主题的组件,拥有简明的API

8、Vuetify | 参考地址

Vuetify 是一个基于 Vue.js 精良实用UI组件库,它的整套 UI 设计均为Google的 Material 风格,即使你没有任何设计技能,也能成功地创造出美观耐看的 Material 风格界面。此外它还能够为你设计个性主题,满足缺陷人群的访问需要。

9、 Vuesax | 参考地址

Vuesax是基于Vue.js的组件框架,如果你是初入行业的新手设计师,也完全可以逐步采用。Vuesax在应用程序的开发上有着丰富功能作用,力求在不删除应用必要功能的情况下改进其设计。它赋予所有组件独立个性的颜色、形状与设计,以便于更好地达成前端提倡的自由设计。

10、Buefy | 参考地址 

Buefy 基于 Bulma 和 Vue.js,是一款轻量级UI组件。Vue UI组件库Buefy,即装即用非常轻巧,没有过多的内部依赖。

11、Vant UI | 参考地址 

Vant 是开源的移动端组件库,服务于十多万开发者,是业界主流的移动端组件库之一。Vue UI组件库Vant 组件平均体积小于 1KB(min+gzip),包含了 65+ 个高质量组件,几乎能够实现移动端主流场景的全覆盖。其中也提供了react版本vant

12、PrimeVue | 参考地址

PrimeVue是一个针对Vue.js开发的综合UI组件库,提供了超过90种可重用且可定制的组件,旨在加速Web开发,同时遵循最佳实践和可访问性标准。通过其丰富的组件库和高度的可定制性,为Vue.js开发者提供了一个强大的工具集,帮助他们快速构建出既美观又实用的Web应用。无论是需要构建复杂的数据驱动型应用、精美的商业网站还是响应式的移动应用,PrimeVue都能提供必要的UI解决方案。加之其对可访问性的重视和对TypeScript的支持,使得使用PrimeVue开发的应用不仅用户友好,而且代码质量高,维护性好。

其中序号并不代表排名,根据自己实际项目需求选择。如果在 Vuetify 与 Element之间比较纠结可以参考 前端:Element UI 与 Vuetify 的选择-CSDN博客 相信可以给你比较好的建议


以下为 GitHub 星标及分支情况,这个也可以作为选择其为开发框架的依据之一

Vuetify: 38.6k stars ~ 7k forks

Element:53.9k stars ~ 14.7k forks

Bootstrap :14.4k stars ~ 1.9k forks

iView:24k stars ~ 4.2k forks

Buefy:9.5k stars ~ 1.1k forks

Mint UI:16.6k stars / 移动应用

Vant UI:17.6k stars ~ 3.5k forks / 微信小程序

PrimeVue:6.4k stars ~ 929 forks



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。