[Vue2.0]手撸手淘H5购物车

Introduction

最近一直在写React，Vue有段时间没写了，因此趁这个时间设计个Vue的小项目练练手。

年轻时在电商的公司实习过，因此仍是打算写一个电商相关的小项目，也算是一个总结。 所以此次就拿手淘H5购物车开刀。项目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的惟一性。

Screenshot

License

Shopping-Cart-H5 is MIT licensed.