前言

上一篇我們講到 Tailwind，
這篇我們來講解 PrimeVue，怎麼安裝、配置、使用。

剛開始挑套件框架時挑了滿久的，
那時候是想搭配 UI design 加上要能跟 Tailwind 共存，修改還要具有彈性，

最後是選了 PrimeVue，但大家可以自由選擇適合的。

前置

安裝

$ npm install primevue @primeuix/themes

配置與主題

這邊 PrimeVue 提供了 Aura, Material, Lara and Nora
這四個 presets 可以選擇作為主題，

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Material from '@primeuix/themes/Material'; // 引入 Material preset

const app = createApp(App);
app.use(PrimeVue, {
    theme: {
        preset: Material /*配置 preset */
    }
});

那當然你也可以基於某個 preset 去做擴充或修改:

import "./style.css";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Material from "@primeuix/themes/Material";
import { definePreset } from "@primeuix/themes";

const app = createApp(App);
const myPreset = definePreset(Material, {});/* 定義自己的 preset, 後續會有用*/

app.use(PrimeVue, {
  theme: {
    preset: myPreset,
  },
});
app.mount("#app");

使用

這邊我們已 <Button> 為例
先來看官網文件

▲ 1. 引入組件 , 2. 基礎使用方法
<script setup>
import { ref } from "vue";
import Button from "primevue/button"; /* 1. 手動引入按鈕 */

const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <div class="flex flex-col items-center justify-center">
    <h1>現在的數字是: {{ count }}</h1>
    <Button label="點我+1" @click="increment"></Button>
    <!-- 2. 使用元件 -->
  </div>
</template>

這邊你可能會發現一件事

我的按鈕顏色跟官方範例好像不太一樣?

這是因為我們前面所設定的 preset 會有預設的主題，
那要更改樣式有兩種方法。

更改樣式

秉持本篇章先實作的觀念，
如果你今天想更改這個按鈕外觀你會做什麼?

沒錯，先無腦給他 class 看看有沒有效果:

<Button label="點我+1" class="bg-black"></Button>

然後你會發現:

嗯? 沒有

好! 那我們打開檢查看一下

可以發現
2 的部分，我剛加上的 bg-black，
確實有應用到按鈕上，但被按鈕本身的 .p-button 給蓋過了
也就是說除非我們加上 !important 或是用 inline-style

<Button :style="{ backgroundColor: 'black' }" label="點我+1"></Button>

確實ㄚ! 這樣可以蓋過去，但建議還是遵循官方的最佳實踐，先從 preset 開始改。

擴充 preset

一樣! 用套件看文件，
打開 <Button> 那頁，點擊 THEMING ;

ctrl+f 搜尋 background ;

@@? 怎麼那麼多，我要改哪個?

我們把注意力拉回 檢查 的結果

所以很明顯，現在要改的是 primary 的 background

再擴充我的 preset

// main.js
const myPreset = definePreset(Material, {
  components: {
    button: {
      root: {
        primary: {
          background: "#000",
        },
      },
    },
  },
});

然後你再去看畫面會發現，沒錯，什麼都沒變

? 耍我?

剛剛其實是第一次使用 PrimeVue 會出現的情況，
因為你更改的並不一定是實際的 class

那到底! 到底要怎麼改!

既然 PrimeVue 的樣式會取決於 preset，那我們把 preset log 出來看看。

const myPreset = definePreset(Material);
console.log(myPreset);

這會 log 出一個物件 preset
並打開、打開、打開到我們的 primary button

你會發現他被藏在 colorSchema 裡面的 light 裡面，
這時候如果你沒有看到這篇文章，找了半天，看到這個，
你心裡應該只有 幹，

好! 我們終於找到應該改哪裡了

我必須說，這個真的是醜到夭壽
而且如果你需要 RWD 那這邊做不到

Pass through 屬性

所以就要依靠另一個屬性 pass through

1. 點擊文件 tabs 裡的 PASS THROUGH
2. 剛剛我們要改的是 root 樣式

<!-- App.vue -->
<Button label="點我+1" :pt="{ root: { class: 'md:w-full' }
      <!-- 螢幕寬度大於 768px 會加上 width:100% 的 class-->

▲由於 PrimeVue 是有支援 tailwind 的，所以這樣我們就能快速配置樣式

結語

此篇文章我們進入到組件框架的部分;

組件框架最花時間的，
就是要把他調整成自己喜歡的或是 UIUX 設計的樣式。

所以我才會花很大部分在於講解怎麼修改樣式上，
那礙於篇幅長度以及實際學習上，無法每個組件都帶到，

但今天教的 preset 跟 pass through 屬性是每個組件 一定有的
也是我一開始踩坑踩的最多的地方。

明天將會是這個小篇章的最後一篇，
兩個 UI 框架同時存在的情況，統一 design token 是必備的，
那怎麼做呢? 記得看明天的文章

一些小練習

1. 安裝並開始使用 PrimeVue 的其中一個 component 並試著更改樣式