Vue3 PrimeVue 应用开发实战1

最新推荐文章于 2025-11-29 01:48:28 发布

原创

最新推荐文章于 2025-11-29 01:48:28 发布 · 1w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#Vue3 #Vue

本文详细介绍了如何使用Vue3集成PrimeVue进行UI组件库的开发，包括PrimeVue的特性、安装步骤、主题选择以及组件的按需导入。通过一个实战案例展示了如何构建一个符合后台管理系统需求的子页面框架，包括外边框、标题栏、查询栏、数据栏和表单对话框的设计，并提供了相应的代码示例和页面效果展示。

Vue3 PrimeVue 应用开发实战1

1.PrimeVue简介

PrimeVue 是一套非常优秀的 Vue UI 组件库，支持 Vue 3 的 web UI 组件库，组件丰富，定制性很强，官网文档清晰，代码例子充足，而且中文化也做得很不错，是一款可用性很强的 Vue 组件库。

PrimeVue 的技术特性：

组件丰富。内置 70 多个常用的组件，体验优秀，使用简单
主题丰富。内置大量主题，且提供强大的主题定制工具
高效开发模板。由专业设计师设计并由 Vue 专家精心制作的精致的 Vue-CLI 开发模板
可访问性强。面向所有人的UI组件，全面支持 WCAG（Web内容可访问性指南）标准
PrimeVue 是一个与设计无关的库，实现原理是将样式分为 core 和 theme。core 驻留在 PrimeVue 内部，以实现和组件结构相关的效果，例如定位，而 theme 实现颜色，填充和边距。
PrimeVue 提供各种免费开源的主题和高级主题，我们可以从各种主题中进行选择，也可以使用官方提供 Theme Designer 工具轻松开发自己的主题。

PrimeVue文档：

英文文档：PrimeVUE

中文文档：PrimeVUE, 一个为vue3设计的终极UI库

中文文档和英文文档版本不一致，建议以英文文档为主，参照中文文档，如果英文好的话就只看英文文档。

2.使用PrimeVue

使用PrimeVue，需要使用的主要内容包括：组件、图标、布局系统，所以，需要安装这三个部分，命令如下：

npm install primevue@^3.12.1 --save
npm install primeicons --save
npm install primeflex --save

下一步，设置PrimeVue配置：

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

app.use(PrimeVue);

接下来，导入样式单

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

如果需要使用布局系统，还需要导入：

primeflex/primeflex.css

main.js文件完整内容：

import { createApp } from 'vue'
import App from './institution.vue'
import PrimeVue from 'primevue/config'
import 'primevue/resources/themes/bootstrap4-light-blue/theme.css'       //theme
import 'primevue/resources/primevue.min.css'                 //core css
import 'primeicons/primeicons.css'                          //icons
import 'primeflex/primeflex.scss'

const app = createApp(App)
app.use(PrimeVue)
app.mount('#app')

3.主题

PrimeVue提供了一些免费的主题供用户使用，如下：

primevue/resources/themes/bootstrap4-light-blue/theme.css
primevue/resources/themes/bootstrap4-light-purple/theme.css
primevue/resources/themes/bootstrap4-dark-blue/theme.css
primevue/resources/themes/bootstrap4-dark-purple/theme.css
primevue/resources/themes/md-light-indigo/theme.css
primevue/resources/themes/md-light-deeppurple/theme.css
primevue/resources/themes/md-dark-indigo/theme.css
primevue/resources/themes/md-dark-deeppurple/theme.css
primevue/resources/themes/mdc-light-indigo/theme.css
primevue/resources/themes/mdc-light-deeppurple/theme.css
primev