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

栏目: JavaScript · 发布时间: 7年前

内容简介:最近一直在写React,Vue有段时间没写了,所以趁这个时间设计个Vue的小项目练练手。年轻时在电商的公司实习过,所以还是打算写一个电商相关的小项目,也算是一个总结。 因此这次就拿手淘H5购物车开刀。数据都是来自手淘的真实数据,也是观测了一段时间才定义好数据结构。 整个项目下来还是有不少收获,坑点慢慢都会总结到个人博客里。

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

年轻时在电商的公司实习过,所以还是打算写一个电商相关的小项目,也算是一个总结。 因此这次就拿手淘H5购物车开刀。 项目GitHub

数据都是来自手淘的真实数据,也是观测了一段时间才定义好数据结构。 整个项目下来还是有不少收获,坑点慢慢都会总结到个人博客里。

因为鄙人手底下只有一台6s Plus,所以只是在这台手机的Safari和Chrome下做了测试,如果在其他机子上有 问题欢迎提issue.

仿手淘H5购物车 手机扫二维码直达️

[Vue2.0]手撸手淘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 的唯一性。


以上所述就是小编给大家介绍的《[Vue2.0]手撸手淘H5购物车组件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从入门到精通:Prezi完全解读

从入门到精通:Prezi完全解读

计育韬、朱睿楷、谢礼浩 / 电子工业出版社 / 2015-9 / 79.00元

Prezi是一款非线性逻辑演示软件,它区别于PowerPoint的线性思维逻辑;而是将整个演示内容铺呈于一张画布上,然后通过视角的转换定位到需要演示的位置,并且它的画布可以随时zoom in和zoom out,给演示者提供了一个更好的展示空间。 Prezi对于职场人士和在校学生是一个很好的发挥创意的工具,因为它的演示逻辑是非线性的,所以用它做出来的演示文稿可以如思维导图一样具有发散性,也可以......一起来看看 《从入门到精通:Prezi完全解读》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具