iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
2

Vuetify 是一個基於 Vue 的 UI 框架,

類似於 Vuetify 的框架或函式庫有很多,例如:

...等等。

更多 Vue.js Libraries,請看 21 Top Vue.js UI Libraries For Your App

個人選擇喜好

先強調一下,純粹個人喜好,可以不同意。
我用過的三個 vue 的 UI 框架排名:

  1. Vuetify
  2. Element UI
  3. VueStrap

這個排序或許會跟很多人不同,但必須先說的事情是,
這個順序也是我對這三個框架熟悉的程度,和使用的心得。

Vuetify

只在自己 side project 使用過 Vuetify,
我認為 Vuetify 的 grid system 非常優秀,
讓我幾乎可以不用寫任何一行 CSS 就可以完成複雜的切版,
而過程只需要透過幾個核心元件並傳入 props。

第一次看官方文件的 layout 範例真的嚇到了,
可以完全專注在開發客製化樣式而不是大量的切版和微調,
而大量且足夠彈性的元件,真的節省了很多開發時間。

除大量可用元件外,文件也是個人認爲做的最棒的,
清楚明瞭列出該元件有哪些 props, event, slot 等等,
還有 7 國語系,雖然只看得懂中文和英文。

提供許多可以覆寫的全域變數、class 和設定,例如:

  • breakpoints: 方便處理 RWD
  • spacing:
    透過預先定義好的 class,例如:pa-1, ma-3, pt-0,
    代表 padding, margin, padding-top 的寬度,
    讓我們不必再刻意為了一個小間距想一個 class 名稱,
    更棒的是可以將切版的樣式與客製化樣式明確區分。
  • text alignment:透過 class 對齊文字。
  • typography: 透過 class 控制字體大小和粗細。
  • display: 透過 class 決定在哪些設備寬度下,要或不要顯示某些區塊。
  • color:
    透過 class 更改顏色和背景色,
    例如 classname:red, red--text, lighten-5, darken-2 等等,
    不用再為了顏色煩惱。

小結論:

Vuetify 和其他兩個相比,有個滿大的差異,
就是 Vuetify 像是一個 UI framework,
而 Element UI 和 VueStrap 算是 vue component 的 library。

而 Vuetify 其實還有個小缺點,但相信不久之後這個問題就不存在了,
那就是 Vuetify 沒辦法單獨引入元件,打包起來檔案比較大,
但 vuetify-loader 似乎已經釋出了,
雖然還沒用過,但距離 tree-shaking 應該不遠了。

Element UI

個人認為 Element UI,也是非常優秀的,
雖然不像是 Vuetify 有那麼多有的沒的東西,
但這樣反而乾乾淨淨,不會被一些根本用不到的功能污染環境,
如果只需要單純使用元件,推薦 Element UI。
Element UI 不只是 UI 美麗(個人很喜歡哈哈),
更可以單獨引入需要的元件或是指令,
開發起來介面真的是非常優雅啊!
Element UI 也是依照 BEM 的規則開發樣式,
所以要覆寫樣式在大部分的情況下很容易。

再來,小小吐嘈一下:
不知道是不是自己程度不夠,還是需求太複雜,
用 Element UI 時,時常會需要刻意去覆寫樣式才有辦法達到想要的結果,
元件有很多 prop 是要傳入 custom-class 而無法直接給 class,
元件有許多樣式寫成 inline style,非常難覆寫
使得在開發時時常需要花很多時間去追蹤,
並針對 css 權重的部分特別處理,
layout 跟 grid system 的使用也不像 vuetify 那麼方便,
個人覺得,仍然需要寫很多 css。

VueStrap

是一個將 bootstrap 3 components 改寫成 vue 的版本的 library。
由於本人對 bootstrap 實在是不太熟,主要是聽到別人說不怎麼喜歡,
自己是在維護公司專案上使用,沒有花太多時間去研究,就不多加評論了。

VueStrap 同 Element UI 可以單獨引入元件,
也提供清楚的文檔,和許多彈性的元件可以使用。

小總結

我覺得三個真的各有優缺點,當然上面的評論的確個人喜好成分居多,也非常主觀,
因為自己還是最喜歡 Vuetify 和 Element UI,
尤其拜讀這些大神們寫的框架和元件庫的原始碼,
真的可以學到非常多技巧和細節,了解自己還有哪些不足的地方。
如果以上有任何不恰當的地方,還請留言告訴我。

安裝 Vuetify

簡單比較過三個框架或元件庫之後,來安裝 Vuetify 吧!

因為是使用 create-nuxt-app 建立的 Nuxt.js 應用。

之前文章中的範例都是已經安裝好 vuetify 了,
以下就做一些客製化的基本設定:

  • plugins/vuetify/index.js
import Vue from 'vue'
import Vuetify from 'vuetify'

import theme from '@/vuetify.config.js'

Vue.use(Vuetify, {
  theme
})

  • vuetify.config.js

註解掉的部分基本上可刪除,因為之後不會用到,這邊只是留著原本預設的部分。
將 vuetify 的 theme 拆成 ES module 的目的是為了下一篇,
要整合 vuetify 和 storybook 的樣式。

// import colors from 'vuetify/es5/util/colors'

export default {
    primary: '#41B883',
    // accent: colors.grey.darken3,
    // secondary: colors.amber.darken3,
    // info: colors.teal.lighten1,
    // warning: colors.amber.base,
    // error: colors.deepOrange.accent4,
    // success: colors.green.accent3,
    main: '#121212'
  }
  • nuxt.config.js
plugins: [
  '@/plugins/vuetify'
]

程式碼放在以下 branch:

009-vuetify-config-theme

指令:

git clone -b 009-vuetify-config-theme --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run dev

上一篇
#8: Plop: 三秒寫一個 component
下一篇
#10: Vuetify 導入 Storybook & Nuxt.js
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30

尚未有邦友留言

立即登入留言