喜欢 Vuetify 吗？那就来认识一下 PrimeVue 吧，这是一个功能强大的全新 Vue UI 库。

每个 Vue 开发者都知道Vuetify ， 这是一个基于 Google Material Design 指南的全功能 Vue UI 库，但本文与它完全无关。

本文介绍的是PrimeVue。

PrimeTek Informatics推出了一款全新的 UI 库，并自诩为“最完整的 Vue UI 框架”。

PrimeTek在官方新闻稿中表示……

PrimeVue 是最完整的 Vue UI 组件套件，包含 50 多个组件、主题设计器、各种 VueCLI 模板和专业支持。

我可以确认 PrimeVue 的组件文档确实支持他们的说法，但你不必只听我的一面之词，自己去看看吧。

既然你已经跃跃欲试，准备好体验 PrimeVue 了，那么让我们创建一个 Vue 测试项目，并尝试使用 PrimeVue 按钮组件。

设置您的 Vue 项目

打开终端，导航到你想存储此项目的位置，然后执行以下命令。

vue create primevue-playground

由于我们只专注于使用 PrimeVue 的组件，所以选择默认设置（babel、eslint）。

? Please pick a preset:
> default (babel, eslint)
  Manually select features

Vue 项目设置完成后，进入该项目并使用npmcd添加 PrimeVue 和 PrimeIcons 。

cd primevue-playground && npm i primevue primeicons

在代码编辑器中打开你的项目。

code .

启动开发服务器。

npm run serve

然后导航到http://localhost:8080/终端中显示的 localhost URL。

如果你看到了传统的 Vue 样板登录页面，那么你就可以继续下一步了。

去除冗余的样板文字

找到App.vue并复制/粘贴以下内容到该位置……

    <template>
      <div id="app">
        // PrimeVue Components will go here
      </div>
    </template>

    <script>

    export default {
      name: 'app'
    }

    </script>

为了保持整洁，请HelloWorld.vue从src/components/目录中删除该组件。

添加 CSS 依赖项

为了应用 PrimeVue 样式，您需要在main.js文件中导入一些 CSS 依赖项，如下所示。

    import Vue from 'vue'
    import App from './App.vue'

    // Importing the Nova Light PrimeVue theme styles
    import 'primevue/resources/themes/nova-light/theme.css';

    // Importing the base PrimeVue component styles
    import 'primevue/resources/primevue.min.css';

    // Importing the base PrimeIcon styles
    import 'primeicons/primeicons.css';

    Vue.config.productionTip = false

    new Vue({
      render: h => h(App),
    }).$mount('#app')

注意主题样式的重要性吗？

是的，PrimeVue 自带 9 种不同的免费主题。

你可以使用这 9 个主题中的一个，自己修改 CSS，购买他们其他 6 个高级主题中的一个，或者购买他们的 Prime Designer API 的许可证来制作你自己的主题。

另外，我想借此机会说明一下，我并没有接受 PrimeTek 的赞助，这也不是推广广告。我只是想让大家了解一下你们的款式定制选项。

为使用 PrimeVue 组件做好准备

这一步完全是可选的，但我喜欢在摆弄组件时将它们居中放置在屏幕中央，我想你可能也喜欢这样做。

为此，请将此<style>标签及其中的所有内容添加到文件的底部App.vue。

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

完成这些步骤后，您的App.vue文件应该看起来像这样。

    <template>
      <div id="app">
        //  PrimeVue Components will go here
      </div>
    </template>

    <script>

    export default {
      name: 'app'
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

添加 PrimeVue 按钮组件

现在您已准备好使用 PrimeVue 组件，请<Button />按以下步骤添加：

在文件的import Button from 'primevue/button';开头标签之后添加。<script>App.vue
Button通过将Button对象放入文件的 Vue 实例components中来注册组件。App.vue
然后将其添加<Button />到App.vue组件模板中，并在其中<div>添加 id 为app.

完成这 3 个步骤后，您的App.vue文件应该如下所示。

    <template>
      <div id="app">
        // Step 3. Adding PrimeVue Button to template
        <Button />
      </div>
    </template>

    <script>
    // Step 1. Adding PrimeVue Button
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        // Step 2. Registering PrimeVue Button
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

现在就去http://localhost:8080/嘲笑一下你那软弱无力的按钮吧！

接下来，你将学习如何使用PrimeVue 按钮的属性和类来改变这一点。

向 PrimeVue 按钮添加文本

这非常简单明了。

只需label向 PrimeVue 按钮添加一个属性，并传递一个值，例如Primary：

    <template>
      <div id="app">
        // Adding Primary label to PrimeVue Button
        <Button label="Primary" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

现在来看看http://localhost:8080/。

你的按钮Primary看起来很不错，但现在让我们添加一个图标吧！

为 PrimeVue 按钮添加图标

要向<Button label="Primary" />组件添加图标，请前往PrimeIcons 展示页面，找到您想要添加的图标。

icon然后按照 PrimeIcons 的命名规则，添加你想要的图标名称的属性pi pi-{icon name}。

例如，如果您喜欢这个plus图标，您可以像这样将其添加icon="pi pi-plus"到您的组件中。<Button label="Primary" />

    <template>
      <div id="app">
        // Adding the plus icon to your PrimeVue Button
        <Button label="Primary" icon="pi pi-plus" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

更改 PrimeVue 按钮的颜色

现在要更改你的<Button />'s 颜色，请克隆你的组件并像这样<Button label="Primary" icon="pi pi-plus" />更改。labelSuccess

    <template>
      <div id="app">
        <Button label="Primary" icon="pi pi-plus" />
        // Adding 2nd PrimeVue Button labeled "Success"
        <Button label="Success" icon="pi pi-plus" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

现在将该类添加p-button-success到你的新<Button label="Success" icon="pi pi-plus" />组件中……

    <template>
      <div id="app">
        <Button label="Primary" icon="pi pi-plus" />
        // Adding the class "p-button-success" to the 2nd PrimeVue Button labeled "Success"
        <Button label="Success" icon="pi pi-plus" class="p-button-success" />
      </div>
    </template>

    <script>
    import Button from 'primevue/button';

    export default {
      name: 'app',
      components: {
        Button
      }
    }

    </script>

    <style>
    body {
      margin: 0;
    }

    #app {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    </style>

然后您会在浏览器中看到第二个绿色按钮，上面写着“成功”。

现在，为了好玩，将新<Button label="Success" icon="pi pi-plus" class="p-button-success" />组件的icon属性更改为pi pi-check将图标更改为勾号。

更改您的 PrimeVue 主题

要更改 PrimeVue 主题，您只需更改main.js文件中的第一个 CSS 导入即可。

所以不妨试一试！

将主题从 Nova Light 主题更改为 Rhea 主题，方法是将第一个 CSS 导入更改为import 'primevue/resources/themes/rhea/theme.css';。

    import Vue from 'vue'
    import App from './App.vue'

    // Importing the Rhea PrimeVue theme styles
    import 'primevue/resources/themes/rhea/theme.css';

    // Importing the base PrimeVue component styles
    import 'primevue/resources/primevue.min.css';

    // Importing the base PrimeIcon styles
    import 'primeicons/primeicons.css';

    Vue.config.productionTip = false

    new Vue({
      render: h => h(App),
    }).$mount('#app')

现在就打开浏览器，看看全新的风格吧！

非常简单的东西。

最后想说的

我强烈建议你花时间深入研究PrimeVue 文档，并不断尝试所有可用的组件。

构建一个美观、灵活、功能丰富且符合 Section 508 无障碍标准的自定义 UI 组件库非常非常难——尤其是对于初创公司、技术爱好者和业余爱好者而言。

对于规模较大的公司和团队而言，与其花费时间构建和维护所有细小的拼图碎片，不如将时间用于解决能够为客户创造价值的业务问题，这样可以获得更高的投资回报。

我绝对不是说 PrimeVue、Vuetify、Quasar 和其他 Vue UI 库是每个 Vue 团队的灵丹妙药，但它们在 Vue 生态系统中绝对占有一席之地。

关于PrimeVue，PrimeTek在其新闻稿中表示……

……目标是使 PrimeVue 在 2020 年成为 Vue 生态系统中知名且有价值的成员……

就我所见，他们似乎已经迅速进入状态。

文章来源：https://dev.to/heyshadowsmith/love-vuetify-meet-primevue-a-powerful-new-vue-ui-library-55p7

菜单

分享

喜欢 Vuetify 吗？那就来认识一下 PrimeVue 吧，这是一个功能强大的全新 Vue UI 库。

喜欢 Vuetify 吗？那就来认识一下 PrimeVue 吧，这是一个功能强大的全新 Vue UI 库。

设置您的 Vue 项目

去除冗余的样板文字

添加 CSS 依赖项

为使用 PrimeVue 组件做好准备

添加 PrimeVue 按钮组件

向 PrimeVue 按钮添加文本

为 PrimeVue 按钮添加图标

更改 PrimeVue 按钮的颜色

更改您的 PrimeVue 主题

最后想说的

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码