White Space Hotel

串接「六角學院旅館 API 服務」，提供查看房型、預約訂房功能

Github Live Site URL

Table of contents

• Features
• Screenshot
• Built with
• Getting Started
  • Prerequisites
  • Installation
• Acknowledgments
• Author

Features

• 首頁能看到所有房型
• 單一房型頁面可以觀看該房型詳細資訊
• 可以用日曆瀏覽未來 90 天已預約與尚未預約的時段
• 不需進行會員註冊，只要填寫姓名、電話、預約起迄時間就可進行訂房
• 只能預約未來 90 天內的時段，若預約失敗，會顯示失敗原因
• RWD 響應式網站（純手刻）
• 依據裝置寬度設計兩種不同的首頁版型

⬆︎ BACK TO TOP

Screenshot

首頁	單一房型頁面
首頁 RWD	單一房型頁面 RWD

⬆︎ BACK TO TOP

Built with

• Vue.js 3：框架
• Vue Router 4：路由管理
• Vue Cli 4：Vue.js 開發的標準工具
• Pug：撰寫頁面
• Sass：設計網站樣式
• axios：發送請求，取得資料
• layDate：日曆

⬆︎ BACK TO TOP

Getting Started

若要在本機啟動專案，請依照以下步驟執行

Prerequisites

• Node.js v8.9 或更高版本（推薦 v10 以上）
• Vue CLI v5.0.8

Installation

1. Clone the repo

   git clone https://github.com/yuna9068/white-space-hotel.git

2. Install NPM packages

   npm install

3. Compile and Hot-Reload for Development

   npm run serve

⬆︎ BACK TO TOP

Acknowledgments

• UI 設計師 edith.hsu 的 UI 稿，並提供相關 icon 圖檔
• 六角學院提供旅館 API 服務
• Flaticon 網站上由 Pixel perfect 製作的 sofa.svg
• Flaticon 網站上由 Pixel perfect 製作的 Television.svg

⬆︎ BACK TO TOP

Author

• GitHub - Yuna

⬆︎ BACK TO TOP