哈~这个vue3组件库中的组件真的是超多，不来试试吗？

用户9078190

发布于 2022-10-25 21:37:17

1.3K00

代码可运行

文章被收录于专栏：知码前端知码前端

运行总次数：0

代码可运行

前言

随着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
    }
});