npm install axios --save
npm install less --save
npm install mockjs --save
npm i vant
npm install vue-router
安装为项目所需的依赖，我们需要将需要的依赖引入我们的项目中
路由的配置
注意:路由文件所需要的home、user、cag组件自己先定义好，然后引入到路由文件中，大家也可以使用懒加载的方式，具体组件的创建就不演示了。
在配置完路由之后，思考我们的配置的路由是做什么的。通常为了页面的切换，我们会需要一个固定在顶部的导航条，我们称之为tabbar，且所有的页面都能看到这个导航条
路由配置结束，需要将其显示出来，路由出口配置在app.html页面
代码
van-sticky为黏性布局，也就是鼠标向下滑动，搜索框会固定在顶部
代码
这里大家看看mock中我们写的假的json数据
看看mockserver.js文件，如果小伙伴写过node的话，这里应该很好理解
这里写了三个接口，对于的三个页面数据，轮播图中用的数据都在goods中，在request文件中，只是简单的对超时做了限制
此项目不需要我们我们二次封装axios
了解完这些前置知识和后，我们在认真关注下我们的swiper组件中的内容
认真看完上面教程，给位友友们应该可以将轮播图正确显示出来了
代码
我们看看这个页面的结构
mock中的数据
代码
代码解释
点击挑转到商品详情
详情页面也是一致的，大家看情况编写。由于涉及到后续的购物车，所有我没有继续往下写了
代码
这里的代码就不做解释了，相信大家都能看懂
将所需要要的组件引入即可
分类页面比较简单，经过首页一节的铺垫，现在我们将节奏快点
页面分为上中下三层。上层为搜索框；中间左侧为侧边栏，右边为商品；下层为导航条
代码
这里贴出的代码是为了方便大家布局使用的
这里大家掌握flex布局即可写出
这个页面其实也是一样的，只是一个横向，一个纵向
到这里就算写完了，希望各位友友们可以自己多加思考，清楚掌握。
同时也请大家多多点赞支持