點燈坊

學而時習之,不亦悅乎

Vuetify 初體驗

Sam Xiao's Avatar 2019-06-27

Vuetify 是基於 Vue 的 Mobile First UI Framework,除了豐富 Mobile UI Component 外,也支援 RWD 與 Helper Class,以前開發 UI 時需使用 Bootstrap,而現在幾乎可以使用 Vuetify 取代 Bootstrap,且與 Vue CLI 完美整合。

Version

macOS Mojave 10.14.5
Node 12.4.0
Vue CLI 3.8.4
Vue 2.6.10
Vuetify 1.5.5

Vue CLI

$ vue create vuetify-hello-world

使用 Vue CLI 建立 project。

Install Vuetify

$ cd vuetify-hello-world
$ vue add vuetify

進入 project 目錄內,使用 vue add vuetify 安裝 Vuetify。

overview000

安裝過程會詢問使用哪個 preset,選擇 Default 即可。

overview001

安裝完執行 yarn serve,會發現 Vue 首頁已經改成 Vuetify,至此 Vuetify 環境已經安裝完成,可以開心使用。

Conclusion

  • Vuetify 已經整合 Vue CLI,只要在 Vue CLI 建立 project 後,再執行 vue add vuetify 即可一鍵安裝 Vuetify

Reference

Vuetify, Quick start