E-COMMERCE ARC — 2026 | Haru Li

DETAIL

問題

與另一名前端工程師協作，要在同一套前端裡撐起商品瀏覽、購物車流程、會員中心（訂單 / 收藏 / 個人資料）、經銷商查詢、FAQ 與聯絡表單等多個模組，且商品內容需要能被搜尋引擎收錄。

做法

以 Vue 3 Composition API + Quasar Framework + TypeScript 建構，整合 Pinia 狀態管理與 Vue Router 路由規劃。完整 RWD 設計支援手機、平板與桌機，API 層以 Axios 封裝，表單接 reCAPTCHA 防機器人。渲染採 SSR 架構，讓商品頁在第一次回應就帶著內容抵達。

結果

支援主流瀏覽器，並通過 W3C 驗證。

TECH STACK //

Vue 3QuasarTypeScriptPiniaVue RouterAxiosSCSSreCAPTCHASSR