由於最近剛好使用了 Vuetify 來練習開發網站
稱還記憶猶新，在這邊紀錄一下使用心得
Vuetify 在安裝上對一個新專案來說，還算滿平易近人的
基本上照著文件走就可以正常使用
但要小心不要不小心忽略步驟，不然很可能會無法正常使用
若使用出現問題，還無法快速排除
建議可以試著直接安裝流程重走，可能會比較快排除問題
有跟 Bootstrape 差不多的 grid system
container 包 row， row 包 col
然後可以透過 class 來決定各 screen 大小應該是幾個 col
對 RWD 還滿友善的
Vuetify 預先定義了不少 class，像是使用他的 spacing 機制
<div class="pa-4" />
就代表對該元素
p: 加上padding
a: all，指4個方向，他還可以指定 t(top)、b(bottom) .... 很多種指法
4: padding 的距離，如果是用 m(margin)
甚至可以使用像是 mt-n4 代表上面的 margin 值是負的，讓元素往上跑一點
其他好用的 class 還有很多，像是文字的調整
text-h3 讓字體放大，text-center 置中文字
使用這些預定義 class 調位置，也很難遇到元素排版看起來位置偏一點點的狀況
善用這些預定義 class ，可以讓開發時寫的 css 少至少5成以上，非常便利
在元素的 style 配色上，也可以使用強大的 Theme 機制
使用他們的 Theme 配色網站
來產生網站整體的色調，使用後很多地方的色調
都只需要使用元素的 property 來調整，像是
<v-btn color="warning"> I am button</v-btn>
就能讓這個 button 變成 warning 的顏色
而 Theme 機制還允許自定義 light 跟 dark，像
<v-btn color="warning" dark> I am button</v-btn>
就是使用 dark 模式下的 warning 顏色，不指定預設就是 light
若網站有要做深色的需求，像是夜光模式，就很適合用這套機制配色
Vuetify 可以整合各種 icon, 像是 material，Font awesome
但其實我覺得預設的 mdi icon 就超好用了， icon 超多
他還有很貼心地做一個 icon 搜尋機制，可以用關鍵字找 icon
如果真的搜不到，到 icon 的官網也可以看到全部的 icon
並且使用 icon 後也不會出現排版上對不齊的狀況，真的很方便
Vuetify 在客制上我覺得滿用心的
他利用了 Vue 原生的機制來達到很多地方的高度客制
像是許多元件都會有自己內建的 loading 組件
像是 <v-card> 他是直條， <v-btn> 他是轉圈圈
這些組件都可以透過 vue 的 name-slot 去客制 loading 的 UI
再來就是 property ，像是 <v-text-field outline>
透過加上 outline 就變成了不同 style 的組件了
Vuetify 作為一個 UI framework，提供的元件相當豐富與完整
並且這些元件的使用體驗相當豐富
像是 <v-btn> 組件在點擊時就會有水波漣漪的效果(ripple的效果)
這樣的點擊體驗其實對 user 滿不錯的，會有很直觀的回饋感
而其他組件想要用的話，也只需要加上 v-ripple 這個 directive 就能使用
其他還有許多滿棒的設計，像是陰影，圓角，嵌入Icon(透過property設定怎麼顯示icon) 等等等
直接讓網站看起來不那麼方正呆版
Vuetify 的 document 我覺得寫得滿清楚的
從怎麼安裝使用，到條列有哪些 UI component 與其對應 demo
還有完整的 api 規格說明，不會讓你有過度黑箱的感覺
當然要靠這些說明文件快速熟練 Vuetify 可能還是有點難度
但靠這些文件要進行摸索其實也十分足夠了
以下是我在開發時會比較常找出來翻閱的文件
Icon
Spacing
Text
Theme Generator
作為一個 UI Framework，Vuetify 完整的UI組件、強大的客制化機制與UX體驗
真的是讓我印象非常深刻，若想追求快速開發一個良好UX體驗的網站
使用 Vuetify 應該會是一個不錯的選擇