1. 首页
  2. >
  3. 前端开发
  4. >
  5. Vue

一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue

介绍

PrimeVue是一个在Github上开源的,功能强大、易于使用、多功能、高性能的 Vue UI 组件库,可帮助Web开发者构建高性能的UI页面,在当前Vue3生态的生态下(PrimeVue全面支持Vue2和Vue3),是对Vue3生态的一个极大的补充和促进!我们来简单地看一看PrimeVue有何过人之处!


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


Github

https://github.com/primefaces/primevue

特性

  • 80+ 组件

primevue涵盖了高质量的80多个常用的组件

  • MIT开源许可

完整的 UI 套件基于 MIT 许可证免费提供,源代码可在 GitHub 上获得,

  • 主题系统

建立在与设计无关的基础架构上,从大量主题中进行选择,例如material, bootstrap或者自定义你自己的主题

  • 模板

由专业设计师设计并由 Vue 工程师制作 Vue-CLI 应用程序模板。

  • 可靠性

面向所有人的用户界面组件

  • 卓越的支持服务

可在 1 工作日内做出响应,并可选择请求增强功能和新功能。

  • 高效率

primevue可以让开发者的效率得到提高

  • 社区

可以在社区与其它成员参与讨论和协作

  • 移动端支持

对于移动端触摸设备提供一流的支持



一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


安装使用

这里我们以Vue3 的项目为例,使用你习惯的管理工具进行安装

npm install primevue@^3.5.1 --save npm install primeicons --save  //或者  yarn add primevue@^3.5.1 yarn add primeicons 
  • 模块化加载

比较适合使用vite或者webpack(配置了vue-loader)

import {createApp} from 'vue'; import App from './App.vue'; import PrimeVue from 'primevue/config'; const app = createApp(App);  app.use(PrimeVue);

组件注册

import {createApp} from 'vue'; import App from './App.vue'; import PrimeVue from 'primevue/config'; import Dialog from 'primevue/dialog'; const app = createApp(App);  app.use(PrimeVue);  app.component('Dialog', Dialog); 

使用

<Dialog></Dialog>

或者单独引用组件

import Dialog from 'primevue/dialog/sfc';

主题样式文件:

primevue/resources/themes/saga-blue/theme.css       //theme primevue/resources/primevue.min.css                 //core css primeicons/primeicons.css                           //icons

PrimeVue 附带各种免费主题可供选择


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue

你还可以安装PrimeFlex来帮助你完成布局方面的工作。

  • 全局配置

同时你还可以配置一些全局配置,比如:

Ripple 可选动画。默认情况下它是禁用的,需要在 PrimeVue 设置期间在应用程序的入口文件(例如 main.js)中启用。

import {createApp} from 'vue'; import PrimeVue from 'primevue/config'; const app = createApp(App);  app.use(PrimeVue, {ripple: true});

全局文本框样式配置

import {createApp} from 'vue'; import PrimeVue from 'primevue/config'; const app = createApp(App);  app.use(PrimeVue, {inputStyle: 'filled'});

全局Z-index层配置

import {createApp} from 'vue'; import PrimeVue from 'primevue/config'; const app = createApp(App);  app.use(PrimeVue, {     zIndex: {         modal: 1100,        //dialog, sidebar         overlay: 1000,      //dropdown, overlaypanel         menu: 1000,         //overlay menus         tooltip: 1100       //tooltip     } }); 

同时PrimeVue还支持国际化以及完整的Typescript类型支持,兼容主流的Chrome内核浏览器

组件

这里我们就不介绍所有的组件了,感兴趣的小伙伴可以先通过截图感受一下:


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue

按钮我们切换下主题试试


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue

后续组件就不切换主题查看了,风格就和上面类似,提供了很多组主题可供选择,下面是一些其它组件的截图:


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue



一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue



一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


上面两个是表格,表格的功能相当的强悍



一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue


一个号称最完整的Vue UI组件库的Vue组件框架——PrimeVue

组件实在太多,以上知识截图了一部分,仅供参考,完整的体验可以参考文档,文档中都有非常详细的介绍以及使用方式

总结

PrimeVue是一个为数不多的高质量Vue组件库,同时支持Vue2 和 Vue3,像Antd、Element UI以及naive-ui等都是比较不错的组件,PrimeVue相较而言是比较陌生的一个,也算是对这一类生态的一个补充,可以作为一个不错的选择!