[Vue2.0]手擼手淘H5購物車

Introduction

最近一直在寫React,Vue有段時間沒寫了,因此趁這個時間設計個Vue的小項目練練手。git

年輕時在電商的公司實習過,因此仍是打算寫一個電商相關的小項目,也算是一個總結。 所以此次就拿手淘H5購物車開刀。項目GitHubgithub

數據都是來自手淘的真實數據,也是觀測了一段時間才定義好數據結構。 整個項目下來仍是有很多收穫,坑點慢慢都會總結到我的博客裏。json

由於鄙人手底下只有一臺6s Plus,因此只是在這臺手機的Safari和Chrome下作了測試,若是在其餘機子上有 問題歡迎提issue.數據結構

仿手淘H5購物車 手機掃二維碼直達️app

仿手淘H5購物車

Tips

電商有兩個概念,一個是SPU(Standard Product Unit),另外一個是SKU(Stock Keeping Unit)。測試

其中SPU就是一個獨立商品,好比iPhone Xs,好比MacBook Pro.ui

而SKU是一個獨立商品的類型組合單元,拿iPhone Xs爲例,假設這款手機有兩種屬性,分別 是顏色容量存儲,假設有黑、白、金三種顏色,16G 和 64G兩種容量存儲,這意味着iPhone Xs 有六種組合方式,這六種組合方式會有不一樣的價格,不一樣的貨存量,變態點兒還有不一樣的促銷方式spa

Usage

### Project setup

yarn install

### Compiles and hot-reloads for development

yarn run serve

### Compiles and minifies for production

yarn run build
複製代碼

關於測試數據,能夠進入src/assets/mock/data.js中修改,而後把console的數據複製到 public/data.json中便可。可是要保證storeIdskuId的惟一性。設計

Screenshot

仿手淘H5購物車

License

Shopping-Cart-H5 is MIT licensed.code

相關文章
相關標籤/搜索