- 搜尋景點方式:
- 關鍵字搜尋景點名稱
- 縣市選單
- 鄉鎮市區選單(裝置寬度 576px 以上才可使用)
- 收藏景點:收藏喜愛的景點,並將資料儲存至 localStorage,下次再進入網站仍能看到上次收藏的景點
- 規劃路線:最多加入五個目的地,可拖曳改變順序,點擊按鈕連至 Google Maps 規劃路線
- RWD 響應式網站(使用 Bootstrap)
- 使用 Google Maps Embed API
首頁 ![]() |
詳細資訊頁 ![]() |
收藏景點頁 ![]() |
首頁 RWD ![]() |
詳細資訊頁 RWD ![]() |
收藏景點頁 RWD ![]() |
- 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:設計網站樣式
若要在本機啟動專案,請依照以下步驟執行
- Clone the repo
git clone https://github.com/yuna9068/farm-stay.git
- Install NPM packages
npm install
- Compile and Hot-Reload for Development
npm run serve
- 資料來源:政府資料開放平臺(提供機關:行政院農業委員會)- 來到農村住一晚-休閒農場住宿資訊
- 版面設計參考: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
- GitHub - Yuna