阅读 760

Vue 全家桶实战小米商城

基于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第三方库生成二维码,实现一些简单功能,第一次使用,还不太熟悉。

待实现功能

  1. 实现全局搜索
  2. 优化代码
  3. 增加退货退款,物流追踪功能
  4. emmmm.....

感谢

感谢慕课网河畔一角老师的实战课程,学到了很多东西。

最后想说

  • 如果你也想挑战这个项目欢迎自取(github.com/jay-zhou-ik…)
  • 如果觉得这个项目还不错的话,欢迎给个赞和start啦~
  • 欢迎在评论区吐槽。