遛噠中途之家

因為看貓貓狗狗的照片很療癒，所以有了靈感聯想到流浪的牠。
希望大家捐罐頭讓牠吃飽飽好過每一天，並且推廣以認養代替購買。

---

目錄

• 作品介紹
• 展示作品
• 專案設定
• 簡介
• 使用技術
• 插件
• 後台介面
• 圖片來源
• 聲明

---

作品介紹

使用 Vue CLI 4 + Vuex 所製作，僅限前端開發練習展示用。

串接 六角學院 API

六角學院 Vue 課程練習 API 申請

展示作品

https://hedgehogkucc.github.io/HalfwayHouse/#/index

專案設定

npm install

開發時編譯和重載頁面

npm run serve

簡介

此作品主要功能有以下:

• 前台

  • 寵物卡片星星點選可收藏 ( 儲存至 localStorage )
  • 捐贈罐頭後點選購物車，完成後續結帳流程。
  • 登入管理後台

• 後台

  • 新增遛噠星人 (可上傳圖片、編輯和刪除)。
  • 新增優惠劵 (可編輯和刪除)。
  • 查看捐贈列表清單
  • 模擬前台捐贈結帳流程

使用技術

• Vue CLI 4
• Vuex
• Vue-Router
• PUG
• SCSS
• JavaScript ( ES6...等 )
• jQuery
• Bootstrap 4
• Axios ( 串接 六角學院 API )
• ESLint ( Standard )

插件

• Vue-cli-plugin-pug
• Vue-loading-overlay

後台介面

後台 - 遛噠星人

後台 - 捐贈列表

後台 - 優惠劵

後台 - 模擬訂單

圖片來源

https://unsplash.com/

https://worldvectorlogo.com/

https://pngtree.com/free-backgrounds

https://www.flaticon.com/free-icons/animal%20prints

聲明

     本作品內圖片、內容等，純粹為個人練習前端使用，不做任何商業用途。