Demo:https://minato1123.github.io/online-store/
使用 Figma 規劃網頁設計,實作 SPA 範例電商平台(具備 RWD)。
由於無實際架設 Server,僅開發環境能實際操作存在 JSON 檔案內的資料,線上版本僅能操作假資料。
圖片與資料來源:Sanrio Gift Gate官方購物網站 | Small Gift Big Smile
帳號:
[email protected]
密碼:pochacco229
最初的目的是藉由一份作品學習到如何打 API 取得資料,因此選擇了常見的主題——電商平台,再加上個人喜好的部分,電商平台主題是帕恰狗。
- 登入
- 註冊(具備表單驗證)
- 帳戶相關資料與操作
- 瀏覽全部商品
部分需要的清單類 API 有做 Pagination。
- 商品詳細
- 未登入狀態會將商品暫存在 LocalStorage(結帳強制登入)。
- 登入後會自動將原本暫存於 LocalStorage 購物車的資料寫入帳號的購物車內。
- 結帳步驟一(填寫個人資料)
- 結帳步驟二(填寫付款、收件資料)
- 結帳完成,訂單確認畫面
- 訂單記錄總覽
- 訂單各項內容與詳細
- 單關鍵字搜尋
- 配合 FZF 套件模糊搜尋(可多關鍵字)
- 下載需要的套件
pnpm install
- 啟動本地後端
pnpm dev:server
- 啟動 dev server(系統開發環境)
pnpm dev
註:在開發環境會真的操作到資料喔!
- Vue 3
- Vue-router
- Pinia
- Vite
- TypeScript
- Scss
- Koa.js