iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

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

Quasar是一款基於 Vue.js 的UI Framework 。有別於一般的UI框架,Quasar 除了擁有Material Design及 iOS風格的 Components 外,還能輕鬆將整個網站打包成Progressive Web App、Electron、Cordova等等應用 。在接下來的三十天中,將由小弟我來為各位一一介紹這個Framework所帶來的強大功能。

鐵人鍊成 | 共 30 篇文章 | 55 人訂閱 訂閱系列文 RSS系列文
DAY 1

達標好文 [Day 1] Vue Quasar Framework介紹與安裝

~在你讀這系列文章前先看這幾行字~ 2021/12補充由於 Quasar 進步非常之快現今最新版本為 2.3.3 與本篇教學版本 0.1.7 相差甚遠其中有蠻...

2018-10-15 ‧ 由 RenZhou 分享
DAY 2

[Day 2] Vue Quasar Framework 環境佈署

安裝 昨天安裝完 今天就直接來佈署環境囉 ~ ! $ quasar init <folder name> 接下來會有介面要來引導你安裝 Proje...

2018-10-16 ‧ 由 RenZhou 分享
DAY 3

[Day 3] Vue Quasar Framework 淺述設定檔 quasar.conf.js

今天就來徹底分析Quasar的設定檔quasar.conf.js 為了方便瀏覽,我們把它拆成各個區塊來講講 不多說就直接開始吧 plugins: [...

2018-10-17 ‧ 由 RenZhou 分享
DAY 4

[Day 4] Vue Quasar Framework 頁面Layout介紹

今天就讓我們直接開始吧~! 前面幾天我們有執行過部署的指令了 不過我們這邊再複習一下 $ quasar init helloworld $ cd hellow...

2018-10-18 ‧ 由 RenZhou 分享
DAY 5

[Day 5] Vue Quasar 打造 旅遊網站系列 1 - Header

本篇演示項目 Toolbar ToolbarTitle Button 這幾天都在想要演示什麼主題會比較好 想一想最近突然好想要出去玩 那就乾脆來做旅遊網站好...

2018-10-19 ‧ 由 RenZhou 分享
DAY 6

[Day 6] Vue Quasar 打造 旅遊網站系列 2 - List & ListItem

昨天已經將Header做好了 今天就接著昨天的進度吧~ 還記得昨天將header上的按鈕設定為 gt-xs 嗎 因為手機頁面沒辦法在上方的toolbar顯示這麼...

2018-10-20 ‧ 由 RenZhou 分享
DAY 7

[Day 7] Vue Quasar 打造 旅遊網站系列 3 - Carousel (頁面輪播)

今天就來做我們的首頁吧 ~!! ?? 其他兩家的首頁 基本上都是圖片輪播的形式 加上一個輸入匡來搜尋目的地 那我們今天就來做這個輪播功能吧 建立新的首頁 由於...

2018-10-21 ‧ 由 RenZhou 分享
DAY 8

[Day 8] Vue Quasar 打造 旅遊網站系列 4 - Input、Autocomplete

今日做完後會長這樣 繼續昨天的進度 該補上搜尋的框框了 先來看一下其他兩家的東西 恩... 不簡單啊 XD? 暫且不看下面的視覺選單 先來打個字搜尋看看...

2018-10-22 ‧ 由 RenZhou 分享
DAY 9

[Day 9] Vue Quasar 打造 旅遊網站系列 5- Popover (彈出視窗)

今天做完我們的頁面會長這樣~ 今天一樣接續昨天的部分~ 我們來做搜尋點擊但是還沒輸入時下面出現的視窗 KLOOK 的視窗雖然有圖片美觀,本來也想做像這種的...

2018-10-23 ‧ 由 RenZhou 分享
DAY 10

[Day 10] Vue Quasar 打造 旅遊網站系列 6 - Cards (卡片)

GitHub Demo 今日完成的畫面 首頁的第一個區塊做完了 今天就來做第二個區塊吧 先看看兩大家的頁面 這種卡片形式的元件,咱們Quasar也有 我們...

2018-10-24 ‧ 由 RenZhou 分享