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

摘要： 最近一直在寫React，Vue有段時間沒寫了，所以趁這個時間設計個Vue的小專案練練手。 年輕時在電商的公司實習過，所以還是打算寫一個電商相關的小專案，也算是一個總結。 因此這次就拿手淘H5購物車開刀。 專案GitHub 資料都是來自手淘的真實資料，也是觀測了一段時間才定義好資料...

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

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

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

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

仿手淘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 中即可。但是要保證 storeId 和 skuId 的唯一性。