樂齊生鮮電商

Demo：https://carolxuan.github.io/Vue3Project/#/

簡介

以 Vue.js 製作的網站，主要功能以下：

前台

• 熱門商品、商品展示、商品分類、單一商品說明
• 購物車
• 購物明細
• 訂單資訊、確認訂單資訊
• 下單頁面

後台

• 管理者登入
• 訂單列表：查看訂單資訊
• 商品列表：新增、刪除、編輯商品
• 優惠卷：新增、刪除、修改優惠卷

使用技術

Web Layout

• HTML、SCSS 客製化樣式
• Bootstrap 5 格線系統、元件

前端開發&框架

• Vue CLI 管理專案
• Vue.js + JavaScript 資料處理及渲染
• Vue Router 建立路由
• Vuex 模組化資料管理
• components 管理頁面

第三方套件

• axios 串接 API
• vue-loading-overlay
• SweetAlert 彈跳視窗
• Vee-validate 驗證表單內容
• Swiper 輪播套件

前台介面

首頁：圖片輪播、介紹

購物專區：商品列表、分類、購物車

結帳流程：輸入優惠碼、確認購物車商品、填寫訂購人資訊、確認訂單

後台介面

管理者登入

訂單列表

商品列表

優惠卷

聲明

• 使用圖片資源：google、flaticon、各大購物網站(商品圖)
• 本作品為個人練習使用，無商業行為