iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
Modern Web

Daily UI : 開發者版系列 第 4

Vuetify:Preface › ❹ Best Learning Strategy on Vuetify

The Fastest Way to start Vuetify


以上為目前其網站的主要章節列表,本系列文雖忽略最後一項,但建議可配合 Getting started > Pre-made layouts,參考其中範例的程式結構,直接讀它們實際是如何使用 Vueitfy 元件,思考它們為何這樣、那樣使用,對你快速上手同樣有幫助。前兩項雖然也忽略,因其內容有些可以自己看或是涉及一些進階、特殊議題( e.g. Accessibility ),但也請稍微閱覽,只要能確實了解大蓋在講什麼就好,這樣未來有開發需求時,就會知道要去哪邊找相關資料

Directives 其實在使用上難度不高,並且其中每個元件的 API 數量也少,也是稍微玩一下,或是看過了解元件使用時機,有需要再查閱文件即可。主要重點就是剩下的兩個章節:Styles & animations 和 UI Components,誠如我之前所說,官方文件就是最好的學習資源,我甚至沒看什麼其它網路教學,連 Stackoverflow 也很少查,只要正確學習,一般來說官方文件都能解決需求

先不管 Styles & animations,請點開 UI Components 中每個元件說明檔,並且確實玩遍其中所有的 Examples,搞懂各元件的大致使用情境,若想快速上手 Vuetify,這絕對是最佳建議,原因是在你玩過各個元件後,你多少會有印象,將來遇到欲實作的 UI,會大概知道要去官網的哪個頁籤找到所需的元件。

同時也因為 在有些 Example 中,官方有示範如何整合一堆 Vuetify 元件,進而建構一個酷炫又穩定的 UI,而且有些元件的 API 描述太過抽象或是你就是看不懂他的描述語句,這時,可能只能在透過測試有使用到這些 API 的 Examples 後才會了解,同時加深印象。了解怎麼查閱文件也是必要技能,你得習慣他們的文件的寫作、排版方式( 我認為這文件質量已經夠高了,如果你還覺得寫得很爛還是看不懂,可以留言讓我知道為什麼 )

為何要先學習 UI Components 而不是 Styles & animations 呢?因為前者提供的全部 Examples 中都會用到一些 Styles & animations 中的東西( 絕大多數是 class name,
例如 d-flexelevation-9 . . . )所以遇到不懂的 class,就去 Styles & animations 裡面查。然後因為 Vuetify 大量使用 Flexbox,所以若你對這個技術不熟,強烈建議先看過這份文件,看它就綽綽有餘,每次我對某 Flexbox API 遺忘或是誤解,只會重看這份文件。

 
 

Is't possible that we master Vuetify ?


就算到現在,我也不認為我真的精通 Vuetify,因每個人對 "精通" 定義不同,而且還得考慮是否有必要。對我來說,"精通" 一詞是指已不太需要看 API 文件,也不太需要測試它們提供的那些 Examples,使用 Vuetify 開發就跟喝水一樣,想喝就喝,毫無困難,那有沒有可能達到這種境界呢?我會說:「 不可能 」。

原因是除非你就是 Vuetify 核心開發者或是你公司專案就是使用此框架( 或你時間真的太多 ),不然很難,因它們不斷在開發新元件,並且更新速度很快,每個元件的相關 API 數量也挺多,根本記不起來。所以多數我使用 Vuetify 時,也就不過是邊查 API 邊測試 Example( 所以我查閱和測試的速度非常快 ),直至達到我想要的 UI 樣式,然後就複製貼上到 IDE 中繼續開發,當你熟悉官方文件時,你對它們後續所推出的新元件上手速度只會越來越快。

最後,與其想要精通這個 UI 框架,不如只需掌握知道怎麼用,遇到困難時該怎麼解即可,把更多的時間去學習其它更重要的核心技術才是。學這個框架確實很有價值,就算公司不是用這套,當你做一些 Side Project 時,為了鍛鍊某些技術( e.g. virtual scrolling )卻又想要擁有華麗的介面,讓你足以放在作品集中,Vuetify 絕對是最佳選擇


上一篇
Vuetify:Preface › ❸ Why i choose Vuetify
下一篇
Vuetify:Cinema Application › Implementation
系列文
Daily UI : 開發者版30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言