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

YanceyOfficial發表於2018-11-24

Introduction

最近一直在寫React,Vue有段時間沒寫了,所以趁這個時間設計個Vue的小專案練練手。

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

資料都是來自手淘的真實資料,也是觀測了一段時間才定義好資料結構。 整個專案下來還是有不少收穫,坑點慢慢都會總結到個人部落格裡。

因為鄙人手底下只有一臺6s Plus,所以只是在這臺手機的Safari和Chrome下做了測試,如果在其他機子上有 問題歡迎提issue.

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

仿手淘H5購物車

Tips

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

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

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

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.

相關文章