vue-nuxt

電商網站專案（Vue + Nuxt 2）

本專案為一個基於 Vue 與 Nuxt 2 所開發的電商平台，涵蓋首頁展示、商品購物車與結帳流程。透過前端互動設計與插件整合，呈現出完整的使用者體驗。

首頁設計

輪播圖區塊：展示主打活動與優惠訊息
服務說明區塊：簡述購物流程與服務特色
熱門分類區塊：引導使用者快速進入商品類別
精選商品區塊：推薦特定商品，提升轉換率

輪播圖區塊畫面

精選商品區塊畫面

商品功能模組

商品列表頁：支援分類篩選、加入購物車、收藏功能

商品列表頁畫面

購物車與結帳流程

購物車：數量調整、刪除、小計與總計即時更新
結帳流程：包含資料填寫、訂單確認與模擬付款

購物車畫面

結帳流程畫面

技術細節

Nuxt SSR 架構，提升首屏速度與 SEO
Vuex 狀態管理 + vuex-persist 資料持久化
Axios 串接 API
多語系支援（nuxt-i18n）
cookie-universal-nuxt 管理登入狀態

插件整合與互動設計

插件名稱	功能說明
slick.js	輪播與商品圖片滑動展示
jquery.syotimer / countdown	倒數計時功能
wow.js	元件進場動畫
jquery-ui.js	增強元件互動性
select2.min.js	強化下拉選單
perfect-scrollbar.js	自訂滾動條外觀
magnific-popup.js	圖片燈箱展示
waypoints.js + counterup.js	數字動畫顯示
jquery.vticker-min.js	垂直跑馬燈（最新消息）