CLAY TOYS 商店

Demo

https://jimmywei01.github.io/Toys/dist/#/

簡介

• 前台: 商品介紹、商品分類、商品細項、購物車功能、訂單列表、結帳資訊
• 後台: 商品管理（新增/修改/刪除）、訂單管理、優惠券管理

主要練習

• Vue Cli 3.0
• Vue Router
• Vuex
• Webpack
• axios 操作 API
• Bootstrap 4 + 手刻 SCSS 混合應用
• RWD

使用外掛

• Bootstrap 4
• vue-axios
• VeeValidate
• vue-loading-overlay

前台內容介紹

商品購物展示列表

• 最新上架的商品，可利用類別篩選出想要的商品

商品細項

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

購物車 & 訂單資料

• 左方為購物車內容，右方為整個購物車商品的加總，並可套用優惠券

• 表單部分具有驗證功能，並於畫面上方放置步驟導引

後台內容介紹

商品基本新增/刪除/修改

• 使用 Bootstrap 4 搭建後台，管理前台所需資料內容

Statement

本作品的文字內容及圖片，純為個人前端網頁技術練習，不做任何商業行為

Source

• Google
• 圖片版權屬於 SideShow、Hot Toys、Quora、POPBEE、io9 所有