Vue2+Vant+mock实现商城项目（上）

一，导航

项目都是从导航栏开始进行的，以便对项目整体有一个认识

项目分为四个界面，分别是：主界面，分别是首页，分类页，购物车，用户界面

四个界面共用同一个底部，即底部实现主要页面的路由跳转，并且四个页面是同级别，那么他们的路由等级都是同一级的，都设为1，子页面进行增加，但子页面可能不需要底部导航栏，就设置变量控制底部导航栏的显现与隐藏

二：首页

首页由上面的搜索框，轮播图，中部的图标和下面的功能介绍详情组成

上面的搜索框是固定的头部的当页面向下滚动时透明色会影响观感，通过scroll滚动判定位置给搜索框添加一个背景颜色

既然能够使用组件了，那么就使用组件提供的swipe来写轮播图呀，直接van-swipe和van-swipe-item，想想以前的用JS写轮播图多麻烦，终于熬出头了

中部的图标可以用flex或者grid布局，两者都是响应式的，因为项目这个是手机端界面，所以这次就使用rem(rem是根据根元素的字体单位来决定大小的)作为基本单位，使用postcss-pxtorem来实现px和rem的转换

下面的功能介绍详情里面的内容是用mock模拟随机数据生成的

看下面的视频简单看个几分钟就知道语法规则了，就可以生成数据了，就可以简单使用了

09.mockjs随机生成数组_哔哩哔哩_bilibili

三：分类页

分类页比较简单由头部的搜索框和下面的详细分类组成

上面的搜索框可以多页面复用，写一个公共组件来复用（这次先讲四个主页面，下次在讲子页面）

下面的部分可以用vant组件的tree select来改

也可以用ul  ol  来写

这个页面还有一个无限滚动技术ListScroll下次在写吧

四：购物车

相信大家都是网购的忠实用户，购物车的功能我就不详细说了，大家肯定都知道

购物车肯定是要跟商品界面（下次写）相连接的，商品添加到购物车，一键全选，多选等，都是购物车的功能

购物车由上面的头部和中间的商品组成和下面的支付组成

上面的头部就不说了

中间的商品和商品相关联，肯定是要有商品添加到购物车，购物车可以对商品进行修改，例如修改数量，或者删除商品(vant组件封装好了SwipeCell 滑动单元格)，修改数量的同时下面的总价肯定夜市要变的，要是不变以后我就不买一件了，多买一点以后搞批发。

下面的部分也是由组件写的SubmitBar 提交订单栏

多选也用组件来实现

五：用户界面

用户界面没啥讲的，子页面下次在讲