前言
随着vue在国内的越来越火，也应运而生了很多的优秀的UI组件库。都很有特点，也比较好用。如大家都能耳熟能详的 element-ui 和 Ant Design Vue都是非常不错的。可惜的是 element-ui 不再维护升级vue3了，不过它的继任者 element-plus确实正在如火如荼的开发着，支持vue3。喜欢 element-ui的一定不要错过它。
不过今天我们要说的这个库可不是 element-plus，而是 PrimeVUE。一个号称组件超多的vue库。同样的支持vue2 和 vue3，还是比较不错的。不过唯一的不足就是没有中文版的文档，对于英文不好的同学可能没有那么友好了~~
官网
https://primefaces.org/primevue/showcase/#/setup
整体这样看还是挺漂亮的哈~
特点
- 组件多：80+
primeVUE支持超过80的组件，平时的开发完全没有问题。 - 独立的css系统
Primevue 有一套自己的css 系统，满足日常开发中的css功能，包括响应式功能，栅格化功能，flex功能等等 - 开源协议
遵循MIT开源协议，可以去github上下载完整代码 - 丰富的可配置的主题
超多的主题让你选择，material、bootstrap、flutentUI 等等
还有好多好多特性，可以去官网一一查看。这里不多介绍了
安装使用
这里还是以vue为例
安装
npm install primevue@^3.6.2 --save npm install primeicons --save
模块加载
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>
样式的引入
primevue/resources/themes/saga-blue/theme.css //theme primevue/resources/primevue.min.css //core css primeicons/primeicons.css //icons
独立的配置（可选）
如果你想使用一些配置，如Ripple，默认Ripple是关闭状态，可以单独开启
import {createApp} from 'vue'; import PrimeVue from 'primevue/config'; const app = createApp(App); app.use(PrimeVue, {ripple: true});
还有 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在国内用的人还是比少的，大部分人用的都是Element系列，还有一个最近刚出比较火的naive-ui，可以查看我之前的文章，有介绍的。
关注我，分享给你最实用的前端信息，提高工作效率，拒绝加班~ 拒绝996~~
