pokestore 寶可電商

Demo

https://icguanyu.github.io/pokeStore/dist/#/

簡介

此為前端練習作品，主要功能為：

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

主要練習

• VueCli (2) --> (3) 10/8
• Vuex
• VueRouter
• 元件概念
• Webpack
• API操作
• RWD
• 手刻前台css

內容介紹

loading

小智與皮卡丘的可愛過場

最新商品

最新上架的商品(由左至右),最多十筆

購物車

電腦版含購物車小動畫

商品過濾

詳細內容

單一商品詳細介紹，自訂數量並顯示小計，同時加入購物車

結帳資訊

訂單資訊

送出訂單

後台

後台並無特別客製或RWD，主要使用bootstrap

使用外掛

• bootstrap (僅後台使用)
• vue-axios
• swiper (可滑動的slideshow)
• VeeValidate (驗證)

過濾功能

• 價格符號與分位
• 字數限制
• 日期轉換(後台)

詳細內容

耗費工時

約5個工作天，每日八小時(或以上)。

感謝

• 六角學院Vue出一個電商網站
• pokemon

仍有許多內容未完善，實際體驗架設一個小電商後才發現：

要完成的細節真的太多了，難怪架一個好的電商要幾十萬或上百萬(汗，而且真的不是一個人能完成的。

內容來源

• google: pokemon
• https://www.pokemon.com/us/