Vue 练手 仿手淘 H5 购物车

Screenshot

Introduction

以前写的一个购物车的练习工程. 数据都是来自手淘的真实数据. 可访问线上链接体验.

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的唯一性。

Features

• 展示购物车数量, 每个商铺的商品, 总价等

• 点击左边的 radio 可以将商品加入到下单计算

• 点击 + 或 - 可以增加或减少数量

• 左滑展示删除按钮, 可以删除商品

• 展示 sku picker

Tips

电商有两个概念，一个是 SPU(Standard Product Unit)，另一个是 SKU(Stock Keeping Unit)。

其中 SPU 就是一个独立商品，比如 iPhone Xs，比如 MacBook Pro.

而 SKU 是一个独立商品的类型组合单元，拿 iPhone Xs 为例，假设这款手机有两种属性，分别 是颜色和容量存储，假设有黑、白、金三种颜色，16G 和 64G两种容量存储，这意味着 iPhone Xs 有六种组合方式，这六种组合方式会有不同的价格，不同的货存量，变态点儿还有不同的促销方式。

组件测试

使用 Cypress 进行组件测试.

License

Shopping-Cart-H5 is MIT licensed.