https://blog.csdn.net/weixin_45583710/article/details/121433335

官网

https://primefaces.org/primevue/

文档

https://primefaces.org/primevue/setup

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

安装使用

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

npminstall 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

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

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内核浏览器

文档更新时间: 2022-04-10 13:46   作者:admin