基于vue + vuex + vue-router + vue-axios + element-ui + swiper + Scss + vue-lazyload + vue-cookie + ES6 + qrcode
效果预览
商城首页
开发目的
学vue也有段时间了，一直项找个项目练练手，通过小米商城这个项目，让自己更熟练的使用vue全家桶，组件式开发，提高自己的业务能力。也想邀请广大朋友一起交流学习，一起进步。
你会获得
挑战这个项目，你将拥有最真实的数据请求接口，通过axios直接向提前准备好的后端接口请求数据，把注意力放在实现功能和页面结构以及代码逻辑上，建议把静态资源及css样式直接拿去引用，方便最快实现效果。
技术栈
vue: 构建用户界面的MVVM框架。vue-router:为单页应用提供路由系统。vuex：中央空调式的集中数据管理。vue-lazyload:：实现图片懒加载，节省用户流量，优化页面加载速度。swiper:解决移动端各种滚动场景需求的插件，使移动端滑动体验更加流畅。scss:css预编译处理器。ES6:ECMAScript 新一代语法，模块化、Promise、Class 等方法非常好用。
实现功能
商城首页，商品详情页，内置vedio视频播放，订单页面，订单列表，购物车功能，登录页面，微信支付，阿里支付跳转第三方收银台。
商城首页
由头部，底部以及内容栏组成，swiper轮播图，导航菜单，商品列表，广告位，图片都使用vue-lazyload实现懒加载，提升性能，缓解带宽压力。
轮播图：使用swiper实现，具体可以看swiper官网，有一系列的炫酷特效，快速上手。
商品详情页
复用了头部底部组件，动态获取商品信息，同时插入了swiper组件轮播，以及内置video视频，通过css3animation属性实现视频播放器的up,down的动画效果。
订单列表
实现商品列表分页，也可以通过npm插件实现滚动加载。
购物车
实现更新购物车数量和购物车的单选状态管理，购物车商品删除，控制全选功能。
登录界面
目前只是使用了提前写入存入cookie的方式实现用户登录注册，日后完善...
微信支付
通过qrcode第三方库生成二维码，实现一些简单功能，第一次使用，还不太熟悉。
待实现功能
- 实现全局搜索
- 优化代码
- 增加退货退款，物流追踪功能
- emmmm.....
感谢
感谢慕课网河畔一角老师的实战课程，学到了很多东西。
最后想说
- 如果你也想挑战这个项目欢迎自取(github.com/jay-zhou-ik…)
- 如果觉得这个项目还不错的话，欢迎给个赞和start啦~
- 欢迎在评论区吐槽。
