探索 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 模板中的

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

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

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

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

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

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

我们还将添加使用搜索栏搜索笔记并按标签过滤它们的功能，以及将笔记添加到“收藏夹”集合的功能，可以独立探索。

导入和注册 PrimeVue 组件

对于这个应用程序，我们将使用一堆 PrimeVue 组件。 要导入和注册这些组件，请替换 main.js文件包含以下内容：

import { createApp } from 'vue'
import App from './App.vue'
​
import PrimeVue from 'primevue/config'
​
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/lara-dark-blue/theme.css'
import 'primeicons/primeicons.css' 
import '/node_modules/primeflex/primeflex.css'
​
import Panel from 'primevue/panel'
import Toolbar from 'primevue/toolbar'
import Button from 'primevue/button'
import Dropdown from 'primevue/dropdown'
import AutoComplete from 'primevue/autocomplete'
import Card from 'primevue/card'
import Tag from 'primevue/tag'
import Dialog from 'primevue/dialog'
import Inplace from 'primevue/inplace'
import InputText from 'primevue/inputtext'
import Editor from 'primevue/editor'
import Chips from 'primevue/chips'
​
import Tooltip from 'primevue/tooltip'
​
const app = createApp(App)
​
app.use(PrimeVue)
​
app.component('Panel', Panel)
app.component('Toolbar', Toolbar)
app.component('Button', Button)
app.component('Dropdown', Dropdown)
app.component('AutoComplete', AutoComplete)
app.component('Card', Card)
app.component('Tag', Tag)
app.component('Dialog', Dialog)
app.component('Inplace', Inplace)
app.component('InputText', InputText)
app.component('Editor', Editor)
app.component('Chips', Chips)
​
app.directive('tooltip', Tooltip)
​
app.mount('#app')

在上面的代码中，我们添加了所有必要的组件，以及 Tooltip指示。

下一步是重命名 HelloWord.vue里面的文件 components目录到 NotesWriter.vue. 然后，编辑 App.vue文件以反映更改的文件名：

现在，我们准备开始有趣的部分。

设置我们的应用程序

打开 NotesWriter.vue文件并将其内容替换为以下内容：

>

在上面代码的开头，我们导入了我们需要的所有 Vue 函数和实用程序。

然后，我们为笔记设置本地存储。 笔记将从本地存储中获取，供用户查看或编辑。 然后，存储将通过使用 watchEffect功能。

这 watchEffect每次更改其任何依赖项时，函数都会运行。 在我们的例子中，依赖是 notes大批。

接下来，我们定义了两个变量： currentNotes将用于显示当前过滤的笔记集合，并且 currentNote将在我们创建或编辑单个笔记时使用。

在下一节中，我们使用了 onMounted挂钩以加载有关组件安装的注释。

随着 allNotes函数，我们可以赋值 notes至 currentNotes所以我们可以渲染所有创建的笔记。 随着 favNotes函数，我们可以过滤 notes数组以获取所有笔记 fav键设置为 true，然后将结果分配给 currentNotes所以我们可以在“Favorites”集合中渲染它们。

代码的最后一部分设置了逻辑 Dialog组件，我们将使用它来创建和编辑笔记。

现在，让我们添加组件模板。

添加 PrimeVue 组件模板

将以下代码放在脚本标记之后：

在上面的代码中，我们 将我们的应用程序包装成一个 Panel组件 并使用 header财产。 然后，我们使用了一个 Toolbar组件添加必要的按钮 。

我们使用 PrimeFlex 实用程序类（ mb-6）。 这将在工具栏和注释之间添加一些空间。

这 Toolbar组件有两个插槽， start和 end，分别用于在左侧和右侧定位工具栏元素。 我们使用了 start插槽在这里添加一个用于创建新笔记的按钮以及一个用于“所有笔记”和“收藏夹”按钮的按钮集。

要使用 PrimeIcons，我们需要添加 icon特定组件的属性并按照以下模式设置其值： pi pi-[icon-name]. 在这种情况下，我们将第一个按钮组件的图标设置为： pi pi-plus.

对于每个按钮，我们将相应的功能分配给 click事件处理程序。

我们将创建 addNote下一节中的按钮。 我们还将使用 end的插槽 Toolbar组件稍后添加用于搜索和过滤笔记的输入。

处理完上面代码中的按钮后，我们使用了包装 div对于笔记，它使用 flex 实用程序类 来正确设置笔记的样式。 然后，我们还有一个 div如果尚未创建笔记（即，如果 notes数组为空）。

接下来，我们使用了一个 Card组件 表示单个音符的 。 我们可以迭代 currentNotes并使用卡的插槽（ title, subtitle, content, footer) 来填充笔记的数据，使用 Tag组件和一个 渲染笔记标签的 v-html指令将便笺的内容显示为 HTML。

最后，我们使用了 Tooltip指令为每个按钮添加提示。 对于“添加到收藏夹”按钮，我们使用三元运算符来检查笔记的 fav值并相应地设置适当的图标。 每次单击时，注释的 fav值从 true至 false或相反亦然。

我在上面的模板中使用了一些实用程序类来使设计更加愉快。 PrimeVue 也使用自己的类，您可以通过 p前缀——例如，如 p-buttonset.

让我们看看到目前为止我们做了什么。 使用以下命令运行项目：

npm run dev

当您访问应用程序的地址 ( http://127.0.0.1:5173/ ) 时，您应该在浏览器窗口中看到以下内容：

很酷！

创建用于添加、编辑、保存和删除注释的功能

在里面添加以下内容 script标签：

// Notes actions 
const isNewNote = ref(false)
function addNote() {
  isNewNote.value = true
  currentNote.id = Date.now()
  currentNote.title = 'Give me a name'
  currentNote.content = ''
  currentNote.tags = []
  currentNote.fav = false
  openDialog()
}
function editNote(note) {
  currentNote.id = note.id
  currentNote.title = note.title
  currentNote.content = note.content 
  currentNote.tags = note.tags
  currentNote.fav = note.fav
  openDialog()
}

在这里，我们首先设置一个 isNewNote变量，它将用于定义我们是创建新笔记还是编辑现有笔记。

接下来，在 addNote函数，我们设置 currentNote使用初始值，然后打开对话框。 我们还设置 isNewNote至 true表示我们要创建一个新笔记。

在里面 editNote函数，我们将已编辑笔记中的数据分配给 currentNote这样当我们打开对话框时，它会显示编辑过的笔记数据。

让我们添加其余的操作：

function saveNote() {
  if (isNewNote.value === false) {
    let note = notes.value.find((note) => note.id === currentNote.id)
    let editedNote = Object.assign({}, currentNote)
    notes.value.splice(notes.value.indexOf(note), 1, editedNote)
    currentNotes.value[currentNotes.value.indexOf(note)] = editedNote
  } else {
    let newNote = Object.assign({}, currentNote)
    notes.value.push(newNote)
    isNewNote.value = false
  }
  closeDialog()
}
function removeNote(note) {
  if (currentNotes.value === notes.value) {
    notes.value.splice(notes.value.indexOf(note), 1)
  } else {
    notes.value.splice(notes.value.indexOf(note), 1)
    currentNotes.value.splice(currentNotes.value.indexOf(note), 1)
  }
}

这 saveNote上面的函数首先检查我们是否保存了编辑过的笔记——换句话说，如果 isNewNote是 false. 如果是这样，我们通过使用 currentNote.id. 然后我们克隆 currentNote通过使用 Object.assign().

我们这样做是为了打破 currentNote和编辑的注释。 它们是链接的，因为 在 JavaScript 中，对象是通过引用复制的 ； 当我们编辑源对象时，复制的对象也会更新，反之亦然。

然后我们更新了我们的 notes和 currentNotes数组。 当我们看到所有笔记以及过滤后的笔记时，我们需要更新两者以使更改可见。

如果我们保存一个新笔记，我们将它推送到 notes数组和集合 isNewNote回到 false.

在里面 removeNote函数，我们检查是否 currentNotes和 notes是平等的。 如果是这样，我们只需要更新 notes. 如果没有，我们需要同时更新 notes和 currentNotes出于与上述相同的原因 saveNote功能。

为我们的笔记编辑界面使用 PrimeVue 组件

在下一节中，我们将使用 Editorcomponent ，它具有 Quill 文本编辑器 作为依赖项。 我们需要先安装它，所以停止应用程序并运行以下命令：

npm install quill

现在再次运行应用程序 npm run dev命令。

伟大的！ 现在让我们添加对话框的代码。 在后面添加以下内容 Panel零件：

  
    
    
  
  
    
  
  
     
    Add tags...
  
  

在这里，我们使用了 Dialog组件 为笔记添加编辑界面。 它将打开一个模态窗口，我们可以在其中编辑笔记的标题、内容和标签。 我们正在用这个组件做一些事情：

• 使用 displayDialog打开或关闭对话框的变量

• 通过添加一些断点使对话框响应

• 设置 modal和 maximizable属性 true

我们还使用了 Inplace用于标题编辑的组件 以及 InputText组件 。 这允许用户通过简单地单击标题来编辑标题，然后在完成时单击关闭按钮。

然后，我们使用了一个 Editor笔记内容的组件。 我们只添加了三个格式化按钮，对于简单的笔记来说已经足够了。

接下来，我们创建了一个 float-label输入 我们可以通过使用添加标签到我们的笔记 Chips组件 。 要添加标签，我们需要用逗号分隔它们。

最后，我们在页脚添加了两个按钮 Cancel笔记创建或 Save创建的笔记。

以下是如何 Dialog当我们创建一个新的笔记时组件看起来：

当我们编辑注释时：

以下是创建的笔记的外观：

现在我们可以使用我们的应用程序创建任意数量的笔记。 但是，随着我们添加注释，找到您需要的注释将变得更加困难。 这就是为什么构建应用程序的最后一步是添加搜索和过滤功能。

Tab Wrangler插件，完美解决Chrome浏览器卡顿问题，节省内存、CPU资源！

添加搜索和过滤功能

在脚本标签内添加此代码：

// Filter notes logic
const selectedTag = ref()
const tags = computed(() => {
  let allTags = []
  notes.value.map((note) => allTags = allTags.concat(note.tags))
  let uniqueTags = [...new Set(allTags)]
  return uniqueTags 
})
function filterNotes() {
  currentNotes.value = notes.value.filter((note) => note.tags.includes(selectedTag.value))
}

在这里，我们创建了一个计算常量，称为 tags从所有笔记中获取所有标签，然后通过创建一个新的标签来删除重复的标签 Set()，它只能包含唯一的项目。

然后，我们定义了一个 filterNotes函数，它允许我们获取带有选定标签的所有笔记。

现在在里面添加以下内容 #end工具栏组件中的模板：

在这里，我们使用了一个 Dropdown组件 允许我们选择我们想要的标签。 上 @blur，我们设置 selectedTag为空字符串，因此输入将被清除。

接下来，在里面添加以下内容 script标签：

// Search notes logic
const foundNotes = ref()
function searchNote(event) {
  setTimeout(() => {
    if (event.query.trim().length) {
      foundNotes.value = notes.value.filter((note) => {
        return note.title.toLowerCase().startsWith(event.query.toLowerCase())
      })
    }
  }, 250)
}
const selectedNote = ref()
function searchNotes() {
  currentNotes.value = [notes.value.find((note)=>note.title === selectedNote.value.title)]
}

在上面的代码中，在我们的 searchNote函数，我们首先添加了一个 setTimeout在组件显示搜索结果之前添加短暂延迟的功能。

我们可以使用 searchNote检查输入查询是否为空的函数，使用 event范围。 如果输入查询不为空，我们按查询过滤注释。

然后我们定义了一个 searchNotes函数，它允许我们通过标题找到笔记并将其放入我们分配给的数组中 currentNotes.

我们需要做的最后一件事是添加 AutoComplete模板中的组件，我们将在 Dropdown零件：

在上面的代码中，我们使用了 AutoComplete组件 与 InputGroupcomponent ，它在输入之前添加一个图标。

这是应用程序的外观 Dropdown和 AutoComplete添加的组件：

测试和预览应用功能

现在我们已经完成了项目的代码，我们可以测试和预览我们添加的不同功能。 下图显示了我们的笔记过滤的结果 Vue标签：

当我们搜索笔记时，我们应该会在“搜索笔记...”占位符下方看到一些建议：

添加输入查询后，应用程序应显示找到的注释，如下所示：

单击“收藏夹”按钮后，应用程序应显示“收藏夹”集合，如下所示：

结论

正如我们所见，PrimeVue 是一个组件丰富的 UI 库，它提供了完整的 UI 构建解决方案、独特的组件、简单的主题和出色的文档。

我们已经构建了一个使用大量 PrimeVue 组件的简单但功能强大的笔记应用程序。 我们学习了如何将它们组合在一起以创建我们想要的应用程序功能。

有了这些知识和 PrimeVue 广泛的文档 ，您就可以开始构建自己的更复杂的应用程序。 快乐编码！

以用户的方式体验您的 Vue 应用程序

调试 Vue.js 应用程序可能很困难，尤其是在用户会话期间有数十个甚至数百个突变时。 如果您对监控和跟踪生产中所有用户的 Vue 突变感兴趣，请 尝试 LogRocket 。

LogRocket 就像一个用于 Web 和移动应用程序的 DVR，从字面上记录您的 Vue 应用程序中发生的所有事情，包括网络请求、JavaScript 错误、性能问题等等。 无需猜测问题发生的原因，您可以汇总并报告问题发生时应用程序所处的状态。

LogRocket Vuex 插件将 Vuex 突变记录到 LogRocket 控制台，为您提供有关导致错误的原因以及发生问题时应用程序处于什么状态的上下文。