最近一直在寫React,Vue有段時間沒寫了,因此趁這個時間設計個Vue的小項目練練手。git
年輕時在電商的公司實習過,因此仍是打算寫一個電商相關的小項目,也算是一個總結。 所以此次就拿手淘H5購物車開刀。項目GitHubgithub
數據都是來自手淘的真實數據,也是觀測了一段時間才定義好數據結構。 整個項目下來仍是有很多收穫,坑點慢慢都會總結到我的博客裏。json
由於鄙人手底下只有一臺6s Plus,因此只是在這臺手機的Safari和Chrome下作了測試,若是在其餘機子上有 問題歡迎提issue.數據結構
電商有兩個概念,一個是SPU(Standard Product Unit),另外一個是SKU(Stock Keeping Unit)。測試
其中SPU就是一個獨立商品,好比iPhone Xs,好比MacBook Pro.ui
而SKU是一個獨立商品的類型組合單元,拿iPhone Xs爲例,假設這款手機有兩種屬性,分別 是顏色
和容量存儲
,假設有黑、白、金
三種顏色,16G 和 64G
兩種容量存儲,這意味着iPhone Xs 有六種組合方式,這六種組合方式會有不一樣的價格
,不一樣的貨存量
,變態點兒還有不一樣的促銷方式
。spa
### 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
中便可。可是要保證storeId
和skuId
的惟一性。設計
Shopping-Cart-H5 is MIT licensed.code