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布局即可写出

这个页面其实也是一样的，只是一个横向，一个纵向

到这里就算写完了，希望各位友友们可以自己多加思考，清楚掌握。

同时也请大家多多点赞支持