1、进入官网

PrimeVUE的官网

2、引入依赖

npm install primevue@^3.18.0 --save
npm install primeicons --save

3、vue项目全局注册

3.1、在main.js（或main.ts）引入

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

app.use(PrimeVue);

3.1.1、在main.js文件引入组件

// 引入PrimeVue组件
import PrimeVue from 'primevue/config';
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
import Ripple from 'primevue/ripple';
import InputText from 'primevue/inputtext';
import Divider from 'primevue/divider';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import ColumnGroup from 'primevue/columngroup';     //optional for column grouping
import Row from 'primevue/row';                     //optional for row
import Toolbar from 'primevue/toolbar'
import FileUpload from 'primevue/fileupload'
import Rating from 'primevue/rating'
import img from 'primevue/image'
import Textarea from 'primevue/textarea'
import Dropdown from 'primevue/dropdown'
import RadioButton from 'primevue/radiobutton'
import InputNumber from 'primevue/inputnumber'
import SelectButton from 'primevue/selectbutton';

按需引入

3.1.2、使用组件

4、引入Sass

4.1、引入Sass依赖

npm install node-sass sass-loader style-loader -S

4.2、查看Sass配置（在package.json查看）

4.3、修改vue.config.js文件

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave:false,//
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'scss',
            patterns: []
        }
    },
})

4.4、将css在main.js注册

import 'primevue/resources/themes/saga-blue/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeicons/primeicons.css'

5、将需要用的组件在main.js注册

6、注册ToastService（弹窗显示）

6.1、在main.js引入

import ToastService from "primevue/toastservice";

6.2、在App.vue引入

<Toast/>

7、表格的使用

• 引入表格时数据问题（无法导入数据）

7.1、将官网的表格数据下载到本地

7.2、修改表格文件数据地址

8、DataView的使用

DataView使用时需要引入PrimeFlex库

8.1、PrimeFlex库官网

PrimeFlex库

8.2、引入依赖

npm install primeflex --save

8.3、main.ts注册

import 'primeflex/primeflex.css'