探索 PrimeVue，一个基于 Vue 的 UI 组件库

使用基于组件的前端使开发 Web 应用程序更容易和更易于管理。 开发人员可以使用 Vue.js、React 和 Angular 等框架在几个小时内构建一个体面的应用程序。

此外，开发人员经常使用带有预制组件的 UI 库，例如 Vuetify，以进一步加快和促进开发过程。

在本教程中，我们将探索一个名为 PrimeVue 的基于 Vue 的最佳 UI 组件库，以及如何将它与 Vue 3 一起使用来创建示例应用程序。 我们将涵盖：

• 什么是 PrimeVue？

• 探索 PrimeVue 生态系统

• PrimeVue 和 Vue 3 入门

• 使用 PrimeVue 和 Vue 3 构建一个简单的笔记应用程序

什么是 PrimeVue？

PrimeVue 是 PrimeTek 提供的一系列开源 UI 组件库的成员 。

除了 PrimeVue 组件库，PrimeTek 还提供 Java (PrimeFaces)、Angular (PrimeNG) 和 React (PrimeReact) 版本 。 这很棒，因为您可以从一个框架切换到另一个框架，并且仍然可以使用几乎相同的组件。

PrimeVue 提供了一组丰富的 90 多个响应式 UI 组件——足以涵盖广泛的用例。 它还提供了一些独特的组件，例如 Terminal（基于文本的 UI ）和 Dock（导航组件 ）。

PrimeVue 的另一个好处是它与设计无关，因此您不受 Material 或 类似 Bootstrap 的样式的 限制。 您可以为您的应用程序选择大量不同的主题，或者您可以构建自己的主题。

PrimeVue 为每个组件提供了很棒的文档，其中包含 Options API 和 Composition API 的专用示例。 文档简短、清晰、易于遵循和理解。

探索 PrimeVue 生态系统

PrimeVue 为主库提供了一些很棒的附加功能，包括 PrimeIcons、PrimeFlex、主题设计器、模板和块。 让我们更详细地讨论这些。

素数图标

PrimeIcons 是一组 超过 200 个常用图标，可用于所有 Prime UI 库。 感谢 PrimeIcons，您无需添加 像 Font Awesome 这样的第三方包 来访问和显示应用程序中的图标。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

PrimeFlex

PrimeFlex 是一个 CSS 实用程序库 ，类似于 TailwindCSS。 它与 PrimeVue 完美匹配。

通常，大多数 UI 库（包括 PrimeVue）的组件或多或少都具有自以为是的样式，这些样式通常很难调整。 这就是像 PrimeFlex 这样的库可以提供帮助的地方。

实用程序类使您能够快速轻松地调整或更改组件的外观。 作为奖励，PrimeFlex 与 PrimeVue 和该系列的其他成员无缝集成。

主题设计师

Theme Designer 是一个基于 Web 的工具 ，可让您完全控制组件在应用程序中的外观。 如果您不想使用 PrimeFlex，那么 PrimeVue 视觉主题设计器 可以帮助您创建您所追求的外观和感觉。

这个方便的工具 需要许可证 才能使用其所有功能。

模板

您可以从 的模板集合中 Vue 应用程序 进行选择。 虽然这些模板很方便，但大多数 PrimeVue 模板仅供购买，起价约为 19 美元。

素数块

PrimeVue 的 PrimeBlocks 是 350 多个即用型 UI 块的集合，例如布局、导航、表单、页面等。虽然有一些免费块，但您需要许可证才能访问完整集合。

请注意，最后三个资源——主题设计器、模板和 PrimeBlocks——大多是付费的。 但是，您可以通过 PrimeVue 实现很多功能，而无需支付额外的功能。

现在，当我们对 PrimeVue 是什么以及它提供了哪些好东西有了很好的理解后，让我们来探索如何使用这个库的组件。

---

来自 LogRocket 的更多精彩文章：

• 不要错过 The Replay 来自 LogRocket 的精选时事通讯

• 了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

• 使用 React 的 useEffect 优化应用程序的性能

• 之间切换 在多个 Node 版本

• 了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri ，一个用于构建二进制文件的新框架

• 比较 NestJS 与 Express.js

---

PrimeVue 和 Vue 3 入门

首先，我们将使用 Vite 搭建一个新的 Vue 项目 。 在终端中运行以下命令：

npm create vite@latest

后 按照提示完成脚手架 ，导航到项目并安装依赖项：

cd your-project
npm install

现在让我们通过运行以下命令将 PrimeVue、PrimeIcons 和 PrimeFlex 添加到项目中：

npm install primevue@^3.15.0 
npm install primeicons 
npm install primeflex

接下来，我们来看一个导入 PrimeVue 组件的例子。 打开 main.js并将其内容替换为以下内容：

import {createApp} from 'vue'
import App from './App.vue'
​
import PrimeVue from 'primevue/config'  // import PrimeVue
​
// import CSS resources
import 'primevue/resources/primevue.min.css'            // core 
import 'primevue/resources/themes/saga-blue/theme.css'  // theme
import 'primeicons/primeicons.css'                      // icons
import '/node_modules/primeflex/primeflex.css'          // PrimeFlex
​
import Button from 'primevue/button'  // import Button component
​
const app = createApp(App)  // create new Vue app
​
app.use(PrimeVue)  // register PrimeVue
​
app.component('Button', Button)  // register Button component
​
app.mount('#app')  // mount the app

现在您可以使用 PrimeVue Button组件如下所示： Vue 模板中的

<Button label="Submit" />

这就是使用 PrimeVue 组件的容易程度。 只需导入并注册它们，它们就可以使用了。

请注意，要获得 PrimeFlex 实用程序类的代码完成和片段支持，您可以安装 VS Code 的官方扩展 。

使用 PrimeVue 和 Vue 3 构建一个简单的笔记应用程序

在本节中，我们将通过构建一个简单的笔记应用程序来进一步探索 PrimeVue 组件。

这是我们将要构建的内容的预览：

用户将能够创建、编辑和删除笔记。 每条笔记都将包含一个标题、一些内容和一个或多个标签。

我们还将添加使用搜索栏搜索笔记并按标签过滤它们的功能