xxuain/webshop-changcucu-vuecli3

shopping cart

麤麤cucu 電商網頁

Demo

https://xxuain.github.io/webshop-changcucu-vuecli3/dist/#/client/home

簡介

為前端練習作品，目的為正式上線並串上籃新金流。

• 前台: 所有商品、商品分類、以及商品細項展示，購物車功能、下單、結帳資訊、管理員登入等。
• 後台: 商品管理（新增/修改/刪除）、訂單管理、優惠券管理。

主要練習

• VueCli3.0
• VueRouter
• Vuex
• Webpack
• axios 操作 API
• Vue 自定義元件
• 前台 Bootstrap 自定義元件設計
• RWD

使用外掛

• bootstrap
• vue-axios
• swiper
• VeeValidate

前台內容介紹

loading 頁面

• 自行撰寫 Loading 元件

商品列表

• 最新上架的商品(由左至右)

商品分類過濾

• 使用filter 將商品過濾出來

商品細項

• router帶入商品唯一ID，顯示單一商品詳細介紹，選擇數量加入購物車

購物車

• 利用 vuex 達到元件同步更新資料

結帳資訊

�- 顯示編輯購物車內容，使用折價券折扣商品金額

表單驗證

�- 表單基本檢查

訂單成立

• 訂單成立後，router帶入訂單唯一ID，顯示訂單資訊
• 結帳後送出訂單，結帳狀態更改為已結帳

後台內容介紹

• 商品基本新增刪功能

後續發展

目的上線並且串上金流，增加後台功能(會員管理、商品細相圖增加、ga加入...) 看來還有好多可以碰的呀～～