# Vue ui framawork研究2

## PrimeVue

### Installation

npm install primevue

main.js

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';

const app = createApp(App);
app.use(PrimeVue);

兩種樣式模式供開發者選擇

### Style
**注意📢非必要不要使用reset css，不然會影響到套件的樣式**
#### Styled Mode
選擇套件提供的樣式會以套件本身的樣式開發，based on pre-skinned components，套件基底樣式設計有參考Material、bootstrap等知名的ui framework
在main.js引入

import "primevue/resources/themes/lara-light-indigo/theme.css";

#### Unstyled Mode
無樣式模式做為想要完全follow設計稿用的一種模式，套用該模式元件的樣式會被拔光，可以透過類似tailwind的class name建立出屬於自己的元件生態。
在main.js的設定方法

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

app.use(PrimeVue, { unstyled: true });

#### 切換主題樣式
說明: 目前官方有在文件特別註明現有的轉換主題樣式方法並非最佳解，且之後的新版本會針對themes主題進行調整和優化，還請看文件的你斟酌使用，或是直接移步至官方文件。連結: https://primevue.org/theming/#switchthemes
切換主題功能，提供了多種架構常見的樣式產生器，可以提供給設計師或工程師進行調整或是參考，以下會以boostrap原生樣式產製一個theme.css並在main.js引入來達成替換主視覺的解決方案

1.首先進入官方文件提供的designer頁面 連結: https://designer.primevue.org/#/

2.選取想要的主題樣式後便會進入樣式產生器的介面
這邊可以針對多個不同原件的初始樣式進行調整，供調整的元件繁多，其中比較吸引人的是他連輸入框的圓角、陰影顏色...等等，都可以調整，調整後可以在panel的右側即時預覽，

3.調整好後可以直接回到頁面的左上角點擊下載，便會得到一個css檔案

4.將剛剛下載的檔案貼到專案資料夾內，並在main.js內引入剛剛調整後的樣式檔案

燈愣，這樣專案的base主題色就成功替換了

### Icon
需額外安裝 icon資源

#### ui套件原生提供的icon資源

npm install primeicons

在main.js引入相關css

import 'primeicons/primeicons.css';

馬上就可以開始使用，並可以透過inline style調整icon大小、顏色

<i class="pi pi-check" style="font-size: 1rem; color: 'var(--primary-color)'"></i>
<i class="pi pi-times" style="font-size: 1.5rem; color: black;"></i>
<i class="pi pi-search" style="font-size: 2rem"></i>
<i class="pi pi-user" style="font-size: 2.5rem"></i>

#### custom icon
需要自行安裝想使用的icon library，官方文件內推薦使用
* google的Material
* FontAwesome

### component
每個元件可以單獨import，和其他ui framework不太一樣，屆時元件管理和嵌套層級可能要注意一下，且他的另名方式很像原生的Html tag建議import可以使用別名用於區隔

//main.js
import Button from "primevue/button"

const app = createApp(App);
app.component('Button', Button);
//sfc template
<template>
    <div class="card flex justify-content-center">
        <Button label="Check" icon="pi pi-check" />
    </div>
</template>

#### datatable
測試table元件是否有符合一般的使用情境
首先引入datatable和column(table的標頭)元件

import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

宣告標頭變數、和表格資料，標頭變數需先將預計串接的欄位名稱和欄位屬性先定義好，以我介接的API為例:
stationId(測量站編號)，
stationName(測量站名稱)，
stationAttribute(測量站歸屬)，
obs(降雨量)

const titles = ref([
  {
    title: '測量站編號',
    field: 'stationId'
  },
  {
    title: '測量站名稱',
    field: 'stationName'
  },
  {
    title: '測量站歸屬',
    field: 'stationAttribute'
  },
  {
    title: '降雨量',
    field: 'obs',
  }
]);
const weathers = ref([
    {
        stationId: xxx,
        stationName: xxx,
        stationAttribute: xxx,
        obs: xxx
    },
    {
        stationId: xxx,
        stationName: xxx,
        stationAttribute: xxx,
        obs: xxx
    },
    .
    .
    .
])

呼叫氣象資料API(請自行建立API或是去介接網路上的公開資料，這裡不多贅述怎麼接資料)，將資料整理成上述的格式，並將資料綁定到元件指定的props上

<DataTable :value="weathers" tableStyle="min-width: 50rem" paginator :rows="10">
    <Column v-for="item in titles" sortable style="width: 25%" :field="item.field" :header="item.title"></Column>
</DataTable>

props屬性說明

DataTable
* paginator - 使用分頁
* rows - 限制一頁顯示的資料列

Column
* sortable - 是否使用升/降冪排序
* field - 對應的欄位屬性
* header - 標頭欄位名稱

燈愣

#### pickList
*用法請參考文件，蠻簡單的

#### splitter
需要引入兩種元件，分別為Splitter和SplitterPanel

import Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';

使用方式也非常簡單

<Splitter style="height: 300px" class="mb-5">
    <SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
    <SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
</Splitter>

實際效果
應用場景可以使用在地圖應用上，也不需要自己刻寫分割畫面

結語: 整體來說使用起來是一個優點蓋過缺點的框架，調整起來也很輕鬆，還有提供影片教學，連結:
https://www.youtube.com/watch?v=FjYesOz95MM
(好用心...遠目Vuetify vue3版本的文件到現在都還沒完善😢)