Pochacco Online Store

Demo：https://minato1123.github.io/online-store/

介紹

使用 Figma 規劃網頁設計，實作 SPA 範例電商平台（具備 RWD）。
由於無實際架設 Server，僅開發環境能實際操作存在 JSON 檔案內的資料，線上版本僅能操作假資料。

圖片與資料來源：Sanrio Gift Gate官方購物網站 | Small Gift Big Smile

🧪 測試登入

帳號：pochacco@example.com
密碼：pochacco229

動機

最初的目的是藉由一份作品學習到如何打 API 取得資料，因此選擇了常見的主題——電商平台，再加上個人喜好的部分，電商平台主題是帕恰狗。

功能

主畫面

會員系統

• 登入

• 註冊（具備表單驗證）

• 帳戶相關資料與操作

瀏覽商品清單、各項商品

• 瀏覽全部商品
  部分需要的清單類 API 有做 Pagination。

• 商品詳細

購物車

• 未登入狀態會將商品暫存在 LocalStorage（結帳強制登入）。
• 登入後會自動將原本暫存於 LocalStorage 購物車的資料寫入帳號的購物車內。

結帳（具備表單驗證）

• 結帳步驟一（填寫個人資料）

• 結帳步驟二（填寫付款、收件資料）

• 結帳完成，訂單確認畫面

訂單記錄

• 訂單記錄總覽

• 訂單各項內容與詳細

商品名稱搜尋功能

• 單關鍵字搜尋

• 配合 FZF 套件模糊搜尋（可多關鍵字）

本地端架設環境的使用方法

1. 下載需要的套件

pnpm install

2. 啟動本地後端

pnpm dev:server

3. 啟動 dev server（系統開發環境）

pnpm dev

註：在開發環境會真的操作到資料喔！

技術

前端

1. Vue 3
2. Vue-router
3. Pinia
4. Vite
5. TypeScript
6. Scss

後端

1. Koa.js

套件

1. unplugin-auto-import
2. unplugin-icons
3. unplugin-vue-components
4. VueUse
5. Lodash
6. FormKit
7. VeeValidate
8. Floating Vue
9. esno
10. FZF