這是一個前後端分離的線上購物網站雛形，本專案為前端頁面，使用 Vue3 架構，提供簡單清楚的購物前端介面。
備註1：完成前端設置後，需要再完成後端 API 串接，才能使用完整的功能 (後端專案設置方式請參考這個連結：https://github.com/jamiennn/shop-backend)
備註2：本專案未做金流相關設定
node v16
- 下載專案
git clone https://github.com/jamiennn/shop-frontend.git
- 下載專案所使用的套件
npm install
- 設定 .env 檔案的後端 API URL
請取名為 .env.development
<!-- 等號後面請放上您的本地後端 API URL -->
VITE_API_URL=http://foo/bar
- 啟動專案
npm run dev
請參考連結：https://github.com/jamiennn/shop-backend
買家帳號：buyer000 密碼：12345678
商家帳號：seller001 密碼：12345678
- 首頁
- 可以瀏覽所有商品
- 左側 Sidebar 可以篩選金額範圍
- 上方的 Searchbar可以搜尋關鍵字
- 如果是買家，可以在首頁將商品加入購物車
-
購物車頁面 買家可以在購物車頁面調整數量或刪除商品，再下訂單，前往訂單頁結帳，結帳後會扣除此商品相應的庫存。
-
商家頁面
- 商家可以透過上方的 Navbar 點選進入商家頁面
- 商家在此頁面可以選擇編輯或下架某個商品
- 新增商品頁
- 商家可以透過上方的 Navbar 點選新增商品進入此頁
- 送出圖片前可以先預覽
- 商品詳細頁
- 瀏覽商品詳細資訊
- 如果是買家，可以加入購物車
- 如果是商品的擁有者，可以編輯或下架