來到農村住一晚

使用「行政院農業委員會 - 來到農村住一晚-休閒農場住宿資訊」資料，提供搜尋景點、收藏景點、規劃路線功能

Github Live Site URL

Table of contents

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

Features

• 搜尋景點方式：
  1. 關鍵字搜尋景點名稱
  2. 縣市選單
  3. 鄉鎮市區選單（裝置寬度 576px 以上才可使用）
• 收藏景點：收藏喜愛的景點，並將資料儲存至 localStorage，下次再進入網站仍能看到上次收藏的景點
• 規劃路線：最多加入五個目的地，可拖曳改變順序，點擊按鈕連至 Google Maps 規劃路線
• RWD 響應式網站（使用 Bootstrap）
• 使用 Google Maps Embed API

⬆︎ BACK TO TOP

Screenshot

首頁	詳細資訊頁	收藏景點頁
首頁 RWD	詳細資訊頁 RWD	收藏景點頁 RWD

⬆︎ BACK TO TOP

Built with

• Vue.js 2：前端框架
• Vue Router 3：路由管理
• Vue Cli 4：Vue.js 開發的標準工具
• Vuex 3：Vue.js 的狀態管理模式
• Bootstrap 4：RWD 響應式網站
• jQuery 3：Bootstrap 相依套件
• Popper.js：Bootstrap 相依套件
• SCSS：設計網站樣式

⬆︎ BACK TO TOP

Getting Started

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

Prerequisites

• Node.js v8.9 或更高版本，需小於 v18（推薦 v16.20.2）
• Vue CLI v4.5.0

Installation

1. Clone the repo

   git clone https://github.com/yuna9068/farm-stay.git

2. Install NPM packages

   npm install

3. Compile and Hot-Reload for Development

   npm run serve

⬆︎ BACK TO TOP

Acknowledgments

• 資料來源：政府資料開放平臺（提供機關：行政院農業委員會）- 來到農村住一晚-休閒農場住宿資訊
• 版面設計參考：Ildiko 的 UI Design Daily 網站 - 首頁卡片樣式、農場詳細資訊頁排版、手機首頁排版
• Icon：Font Awesome - Font Awesome 5
• 版面設計建議 - Terry Chen
• 網站中使用到的圖片 - 聖安 楊、Yeo Khee、Yun-Yue Hsu、Moralis Tsai、Yeo Khee、chasing lin、Peggy und Marco Lachmann-Anke

⬆︎ BACK TO TOP

Author

• GitHub - Yuna

⬆︎ BACK TO TOP