PrimeVue - 全面升级!免费开源、优雅好用的 Vue3 UI 组件库,可选主题超多

新版本发布了,主题超好看,还有很多独有的组件,强烈推荐给大家。

关于新版本 PrimeVue

PrimeVue 是一个用于 Vue.js 3.x 开发的 web UI 组件库。早在2021年10月我就推荐过这个组件库,至今一年多的时间,开发迭代非常快,如今不仅更新了官方网站,也发布了很多新的组件,是一款高质量、广受欢迎的 Vue3 组件库

PrimeVue 新官网
PrimeVue 新官网

PrimeVue 的技术特性

  • 从原来的 50 多个基础 UI 组件,更新到 90 多个,如按钮输入数据表图表等,新组件十分使用独特,体验很好
  • 符合 Web 内容可访问性指南 (WCAG 2.0)
  • 响应式支持,在不同屏幕设备上都有很好的视觉效果
  • 提供更多预制好的主题,为更多类型的项目提供支持
  • TypeScript 有更好的支持,丰富了相关开发工具
  • 更为活跃的开发社区

PrimeVue 新版本

最近这段时间 chatGPT 非常火爆,前两天我也是向 chatGPT 询问了「有哪些好用的 Vue 组件库」,它就给我推荐了 PrimeVue 这款组件,而我在2021年就已经在网站上介绍过这个组件了,这是一个优秀的组件库,有很多主题可以使用,其中不乏 Material Design 风格的主题,简约大气。

PrimeVue 按钮
PrimeVue 按钮

重新翻看《PrimeVue – 基于 Vue 3 的免费开源、定制性强的前端 UI 组件库》这篇文章,发现之前放置的官网 404 了,才发现这一年多的时间,PrimeVue 发展非常迅猛,相比之前,整体有了全面的升级,于是打算再写一篇文章来介绍。

重要提示

PrimeVue 官网改变了域名,以前文章放置的官网已经不能访问了,本文页面放置了新官网,网页更加简洁,内容也更丰富,文档和代码例子教程也更全面,不过目前只有英文。

新组件体验优秀,动画流畅

新版本的 PrimeVue 新增了不少组件,很多组件并不多见,比如:

  • 支持「真」、「假」和「空」三种状态的三态复选框
  • 表单浮动标签:表单名称标签最优雅的交互方式
  • 更多类型的菜单交互组件
  • 电话号码、货币、大数字分隔等数字格式输入框等

还有更多实用又独特的组件,PrimeVue 都提供了易用的定制选项,处理数据和事件绑定。

PrimeVue 输入组件
PrimeVue 输入组件
PrimeVue 输入组件
PrimeVue 输入组件

超多优质的主题

实不相瞒,一开始关注 PrimeVue,其实是看到 PrimeRect 这个项目有很多好看的主题,继而发现了 PrimeVue,这其实都是 Prime 项目,只是用不同的框架实现。

新版本完善了以前的主题,而且增加了很多更好看的主题,很多设计师在 bootstrap 上开发的主题,都移植过来了,设计水平很高,很多主题配色和交互细节很有特点,和国内大同小异的 UI 风格区别很大,一看就很喜欢。而我最喜欢的就是官网默认的 bootstrap Material Design 主题。

PrimeVue 主题选择
PrimeVue 主题选择

自定义主题支持

除了内置的主题,PrimeVue 还提供了一套实用程序,让开发者可以轻松创建自定义主题,并将 PrimeVue组件集成到现有的应用程序中。

免费开源和商用说明

PrimeVue 是一个免费开源的 UI 组件库项目,采用 MIT 开源协议,基于 Vue.js 开发,Vue.js 同样是免费开源的,任何人都可以免费用于商业和非商业项目。

需要注意的是,PrimeVue 的 90+ 基础组件都是免费开源的,官方也推出基于这些基础组件搭建的块组件(block)以及完整的 admin 管理后台,这些成品是需要付费的,请注意区分。还是那句话,基础组件免费开源,高级组件付费,才能让项目健康且持续。