iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
4
Modern Web

[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站系列 第 1

[Day 1] Vue Quasar Framework介紹與安裝

~在你讀這系列文章前先看這幾行字~

2021/12補充
由於 Quasar 進步非常之快
現今最新版本為 2.3.3 與本篇教學版本 0.1.7 相差甚遠
其中有蠻多元件使用方式也跟這篇文章時不一樣
麻煩勞駕至官網查看最新的文件 感謝~

Quasar

是一款基於Vue.js開發的UI Framework。可以讓你輕鬆就搞定網站介面之餘還不失美觀,更重要的是他還能讓你輕鬆就做好RWD,除此之外還能夠幫你加上PWA,使你的網頁變成手機上的App‧。夠厲害吧,趕快讓我們來看看吧!

https://ithelp.ithome.com.tw/upload/images/20181015/20111805PXabnYgcXb.png
Quasar Framework

目前是以 Quasar官方文件 v0.17.17 來做介紹
注意: 這個框架更新非常非常的頻繁 使用官方文件時請多注意版本

選擇Quasar的5個理由

1. 內建了Material 及 iOS 兩種主題

一魚兩吃,還不用嗎 xD ?
Material 已經在Android上行之有年,對於元件怎麼使用都已經幫你訓練好使用者了

2. 元件皆內建RWD快速響應

再也不怕一降解析度網頁直接跑版到自己都認不出來 !

3. 多樣的基礎UI元件庫

還在煩惱怎樣刻CSS嗎 ,在Quasar想要什麼UI元件基本上都有,省去你在UI上花的時間

4. 自帶了Vuex、VueRouter、Vuei18n(多國語系)

新的環境再也不用花時間去安裝這些

5. 強大的佈署工具

想要做SSR、PWA、Cordova 一個指令搞定 !!




Quasar能做什麼?

  • SPA (Single Page App)

玩過Vue應該不會不知道這個吧XD ?!
簡單來說,就是能動態渲染頁面的網頁,告別傳統大量的jQuery與Ajax。

  • PWA ( Progressive Web App)

非常酷炫的東西,未來有機會取代傳統手機App的可怕技術。
如果你沒有聽過,現在說給你聽聽 !!
他能將你做好的網頁直接安裝在手機上,能夠離線瀏覽、離線發文、推送手機通知(目前iOS還不支援),簡直逆天了!

  • Cordova、 Electron

這兩個不是我們這次的重點 就先不介紹了,大家有個印象就好。




安裝

  • 首先要先檢查node版本是否符合

Node.js >= 8.9.0 is required.

$ node --version

目前最新版本應該是 v10.12.0

  • 再來要先安裝 Vue 3.0

$ npm install -g vue-cli
或是
$ yarn global add vue-cli
  • 最後就是我們的Quasar

$ npm install -g quasar-cli
或是
$ yarn global add quasar-cli

來檢查一下版本

$ quasar -v
0.17.20

哇!已經出到0.17.20了 XD
不過通常更新都是多一些先的元件,對於舊的code不會有影響,大家能夠放心。
明天就來佈署我們的第一個環境吧 !


下一篇
[Day 2] Vue Quasar Framework 環境佈署
系列文
[Vue] 使用 Quasar 輕鬆打造 Material 及 iOS 風格的響應式網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
照燒
iT邦新手 4 級 ‧ 2023-05-10 21:27:36

看到Quasar影片是相容各種平台感到興趣,但資料不多...非常感謝你的分享
原本用VUE 2,那時期真的很好用,不過3之後問題不少轉用React
發現React會紅有原因,他能非常靈活,而且概念更接近原生web component
拓展React也很多,只是她不像VUE整理到一起,你要自己找
所以就用了很長一段時間,很穩定而不怎麼需要跟著改動
現在回頭看VUE就很有趣
不過官方教學影片也停在三年前...
但是看起來依舊很有意思

我要留言

立即登入留言