商品详情页

设置商品的router，点击商品展示商品详情页，设置传递参数。

在router.js中设置路由映射。

引入buyCart组件

回到shop.vue组件中，将buyCart.vue引入这个组件中，传入相关数据，以及要实现的监听小球是否进入购物车事件。

buyCart.vue

增加和减少按钮

顾名思义就是在选择食品数量的时相关动作，增加或减少。

思路：点击增加按钮，当前食品数量+1，也就是说当食品数量>=1时，同时显示减少按钮。当食品数量<1时，减少按钮隐藏。

餐厅食品页面shop.vue

点击某个餐厅进入餐厅食品页面。简单的说这个页面分三个区域，分别是头部、导航、内容。

点击首页的搜索图标跳转到搜索页面，效果如图：

接饿了么45个页面重构（四）：vuex的使用和food页面开发一

排序

同理，与分类一样，添加个chooseType()点击事件展示排序内容。

Vuex

在进入项目之前先学习一下Vuex。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这是官网的解释。个人理解为在data中的属性需要共享给其他vue组件使用的部分叫做状态。简单的说就是data中需要共用的属性。

miste页面

点击城市地址转跳msite页面。miste页面分为三个部分，分别是头部地址展示、食品分类列表展示和商铺列表展示。食品分类列表使用Swiper插件做轮播图展示，接下来就来了解如何使用Swiper。

跨域请求数据

使用axios跨域请求数据

我们的项目是前后端分离，后端只负责接口，前端负责数据展示、逻辑处理。但是前后端开发模式，有一个重要的问题，就是跨域问题。Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，实现跨域请求，我使用axios解决跨域。

开发相关的技术栈

vue2 + vuex + vue-router + webpack + ES6/7 + sass + flex + svg + axios

构建项目框架

使用vue-cli脚手架搭建项目