13: vue项目结构搭建与开发

vue其他篇

01: vue.js安装

02: vue.js常用指令

03: vuejs 事件、模板、过滤器

目录：

• 1.1 初始化项目
• 1.2 配置API接口，模拟后台数据
• 1.3 项目整体结构化开发
• 1.4 项目简化版

1.1 初始化项目返回顶部

　　１、初始化项目

　　　　　　vue init webpack itany

　　　　　　cd itany

　　　　　　cnpm install

　　　　　　cnpm install less less-loader -D

　　　　　　cnpm install vuex axios -S

　　　　　　cnpm install animate.css -S            // 项目中切换页面实现动画效果，所以安装 animate.css 模块

　　　　　　npm run dev

　　　　　　

　　2、首先清除项目中的部分内容

　　　　　　1.  删除 src/assets  文件夹（默认存放资源的文件夹）

　　　　　　2.  删除默认组件  components/HelloWorld.vue

　　　　　　3.  删除 App.vue 对默认图片的引用： <img src="./assets/logo.png">

　　　　　　4. 删除 src/router/index.js 文件中 对HelloWorld.vue 组件使用的内容

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router);

export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // }
  ]
})

index.js 删除这里注释的内容

　　3、创建如下目录结构

　　　　　　1. 在项目根目录（src同级目录）下创建  data.json  模拟后台数据

　　　　　　2. 在项目根目录（src同级目录）下默认已创建了 static文件，在此文件夹下创建 css 文件夹，在css文件夹下引入 reset.css 文件（static/css/reset.css）

{
  "seller": {
    "name": "小厨娘淮扬菜（七里街店）",
    "description": "蜂鸟专送",
    "deliveryTime": 38,
    "score": 4.6,
    "serviceScore": 4.1,
    "foodScore": 4.3,
    "rankRate": 69.2,
    "minPrice": 20,
    "deliveryPrice": 4,
    "ratingCount": 24,
    "sellCount": 90,
    "bulletin": "小厨娘品牌创立于1997年，是一家专业、专注餐饮及管理的餐饮企业。截至2013年小厨娘旗下正餐店11家，商超店12家，团队员工2000多名。作为江苏省服务业名牌企业，小厨娘近年来一直保持快速发展势头，并不断向国内一流餐饮同行学习和交流。",
    "supports": [
      {
        "type": 0,
        "description": "在线支付满28减5"
      },
      {
        "type": 1,
        "description": "VC无限橙果汁全场8折"
      },
      {
        "type": 2,
        "description": "单人精彩套餐"
      },
      {
        "type": 3,
        "description": "该商家支持发票,请下单写好发票抬头"
      },
      {
        "type": 4,
        "description": "已加入“外卖保”计划,食品安全保障"
      }
    ],
    "avatar": "https://fuss10.elemecdn.com/0/51/66f76d37f15c96a41379a695b0acejpeg.jpeg",
    "pics": [
      "http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180",
      "http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180",
      "http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180",
      "http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"
    ],
    "infos": [
      "该商家支持发票,请下单写好发票抬头",
      "品类:其他菜系,淮扬菜",
      "江苏省南京市秦淮区龙蟠中路451号2-3楼",
      "营业时间:10:00-23:30"
    ]
  },
  "goods": [
    {
      "name": "热销榜",
      "type": -1,
      "foods": [
        {
          "name": "皮蛋瘦肉粥",
          "price": 10,
          "oldPrice": "",
          "description": "咸粥",
          "sellCount": 229,
          "rating": 100,
          "info": "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "很喜欢的粥",
              "avatar": "http://bbs.itany.com/uc_server/data/avatar/000/00/00/36_avatar_small.jpg"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 1,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "扁豆焖面",
          "price": 14,
          "oldPrice": "",
          "description": "",
          "sellCount": 188,
          "rating": 96,
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 1,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "info": "",
          "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "葱花饼",
          "price": 10,
          "oldPrice": "",
          "description": "",
          "sellCount": 124,
          "rating": 85,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 1,
              "text": "没啥味道",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 1,
              "text": "很一般啊",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "牛肉馅饼",
          "price": 14,
          "oldPrice": "",
          "description": "",
          "sellCount": 114,
          "rating": 91,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 1,
              "text": "难吃不推荐",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "招牌猪肉白菜锅贴/10个",
          "price": 17,
          "oldPrice": "",
          "description": "",
          "sellCount": 101,
          "rating": 78,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 1,
              "text": "不脆,不好吃",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "南瓜粥",
          "price": 9,
          "oldPrice": "",
          "description": "甜粥",
          "sellCount": 91,
          "rating": 100,
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "红豆薏米美肤粥",
          "price": 12,
          "oldPrice": "",
          "description": "甜粥",
          "sellCount": 86,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "八宝酱菜",
          "price": 4,
          "oldPrice": "",
          "description": "",
          "sellCount": 84,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "红枣山药糙米粥",
          "price": 10,
          "oldPrice": "",
          "description": "",
          "sellCount": 81,
          "rating": 91,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "糊塌子",
          "price": 10,
          "oldPrice": "",
          "description": "",
          "sellCount": 80,
          "rating": 93,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
        }
      ]
    },
    {
      "name": "厨娘推荐",
      "type": 2,
      "foods": [
        {
          "name": "红枣山药粥套餐",
          "price": 29,
          "oldPrice": 36,
          "description": "红枣山药糙米粥,素材包,爽口莴笋丝,四川泡菜或八宝酱菜,配菜可备注",
          "sellCount": 17,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/6/72/cb844f0bb60c502c6d5c05e0bddf5jpeg.jpeg?imageView2/1/w/750/h/750"
        }
      ]
    },
    {
      "name": "冰爽饮品限时特惠",
      "type": 1,
      "foods": [
        {
          "name": "VC无限橙果汁",
          "price": 8,
          "oldPrice": 10,
          "description": "",
          "sellCount": 15,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "还可以",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
        }
      ]
    },
    {
      "name": "精选热菜",
      "type": -1,
      "foods": [
        {
          "name": "娃娃菜炖豆腐",
          "price": 17,
          "oldPrice": "",
          "description": "",
          "sellCount": 43,
          "rating": 92,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "菜量还可以,味道还可以",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/d/2d/b1eb45b305635d9dd04ddf157165fjpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "手撕包菜",
          "price": 16,
          "oldPrice": "",
          "description": "",
          "sellCount": 29,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/9/c6/f3bc84468820121112e79583c24efjpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "香酥黄金鱼/3条",
          "price": 11,
          "oldPrice": "",
          "description": "",
          "sellCount": 15,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/4/e7/8277a6a2ea0a2e97710290499fc41jpeg.jpeg?imageView2/1/w/750/h/750"
        }
      ]
    },
    {
      "name": "爽口凉菜",
      "type": -1,
      "foods": [
        {
          "name": "八宝酱菜",
          "price": 4,
          "oldPrice": "",
          "description": "",
          "sellCount": 84,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "拍黄瓜",
          "price": 9,
          "oldPrice": "",
          "description": "",
          "sellCount": 28,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/6/54/f654985b4e185f06eb07f8fa2b2e8jpeg.jpeg?imageView2/1/w/750/h/750"
        }
      ]
    },
    {
      "name": "精选套餐",
      "type": -1,
      "foods": [
        {
          "name": "红豆薏米粥套餐",
          "price": 37,
          "oldPrice": "",
          "description": "红豆薏米粥,三鲜干蒸烧卖,拍黄瓜",
          "sellCount": 3,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/f/49/27f26ed00c025b2200a9ccbb7e67ejpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "皮蛋瘦肉粥套餐",
          "price": 31,
          "oldPrice": "",
          "description": "",
          "sellCount": 12,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/8/96/f444a8087f0e940ef264617f9d98ajpeg.jpeg?imageView2/1/w/750/h/750"
        }
      ]
    },
    {
      "name": "果拼果汁",
      "type": -1,
      "foods": [
        {
          "name": "蜜瓜圣女萝莉杯",
          "price": 6,
          "oldPrice": "",
          "description": "",
          "sellCount": 1,
          "rating": "",
          "info": "",
          "ratings": [],
          "icon": "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/b/5f/b3b04c259d5ec9fa52e1856ee50dajpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "加多宝",
          "price": 6,
          "oldPrice": "",
          "description": "",
          "sellCount": 7,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/b/9f/5e6c99c593cf65229225c5661bcdejpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "VC无限橙果汁",
          "price": 8,
          "oldPrice": 10,
          "description": "",
          "sellCount": 15,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "还可以",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
        }
      ]
    },
    {
      "name": "小吃主食",
      "type": -1,
      "foods": [
        {
          "name": "扁豆焖面",
          "price": 14,
          "oldPrice": "",
          "description": "",
          "sellCount": 188,
          "rating": 96,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 1,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "葱花饼",
          "price": 10,
          "oldPrice": "",
          "description": "",
          "sellCount": 124,
          "rating": 85,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 1,
              "text": "没啥味道",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 1,
              "text": "很一般啊",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/f/28/a51e7b18751bcdf871648a23fd3b4jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "牛肉馅饼",
          "price": 14,
          "oldPrice": "",
          "description": "",
          "sellCount": 114,
          "rating": 91,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 1,
              "text": "难吃不推荐",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/d/b9/bcab0e8ad97758e65ae5a62b2664ejpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "招牌猪肉白菜锅贴/10个",
          "price": 17,
          "oldPrice": "",
          "description": "",
          "sellCount": 101,
          "rating": 78,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 1,
              "text": "不脆,不好吃",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/7/72/9a580c1462ca1e4d3c07e112bc035jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "糊塌子",
          "price": 10,
          "oldPrice": "",
          "description": "",
          "sellCount": 80,
          "rating": 93,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/0/05/097a2a59fd2a2292d08067e16380cjpeg.jpeg?imageView2/1/w/750/h/750"
        }
      ]
    },
    {
      "name": "特色粥品",
      "type": -1,
      "foods": [
        {
          "name": "皮蛋瘦肉粥",
          "price": 10,
          "oldPrice": "",
          "description": "咸粥",
          "sellCount": 229,
          "rating": 100,
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "很喜欢的粥",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 1,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "南瓜粥",
          "price": 9,
          "oldPrice": "",
          "description": "甜粥",
          "sellCount": 91,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/8/a6/453f65f16b1391942af11511b7a90jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "红豆薏米美肤粥",
          "price": 12,
          "oldPrice": "",
          "description": "甜粥",
          "sellCount": 86,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/d/22/260bd78ee6ac6051136c5447fe307jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "红枣山药糙米粥",
          "price": 10,
          "oldPrice": "",
          "description": "",
          "sellCount": 81,
          "rating": 91,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/9/b5/469d8854f9a3a03797933fd01398bjpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "鲜蔬菌菇粥",
          "price": 11,
          "oldPrice": "",
          "description": "咸粥",
          "sellCount": 56,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": ""
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/e/a3/5317c68dd618929b6ac05804e429ajpeg.jpeg?imageView2/1/w/750/h/750"
        },
        {
          "name": "田园蔬菜粥",
          "price": 10,
          "oldPrice": "",
          "description": "咸粥",
          "sellCount": 33,
          "rating": 100,
          "info": "",
          "ratings": [
            {
              "username": "3******c",
              "rateTime": 1469281964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "2******3",
              "rateTime": 1469271264000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            },
            {
              "username": "3******b",
              "rateTime": 1469261964000,
              "rateType": 0,
              "text": "",
              "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
            }
          ],
          "icon": "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/a/94/7371083792c19df00e546b29e344cjpeg.jpeg?imageView2/1/w/750/h/750"
        }
      ]
    }
  ],
  "ratings": [
    {
      "username": "3******c",
      "rateTime": 1469281964000,
      "deliveryTime": 30,
      "score": 5,
      "rateType": 0,
      "text": "不错,粥很好喝,我经常吃这一家,非常赞,以后也会常来吃,强烈推荐.",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": [
        "南瓜粥",
        "皮蛋瘦肉粥",
        "扁豆焖面",
        "娃娃菜炖豆腐",
        "牛肉馅饼"
      ]
    },
    {
      "username": "2******3",
      "rateTime": 1469271264000,
      "deliveryTime": "",
      "score": 4,
      "rateType": 0,
      "deliveryTime": "",
      "text": "服务态度不错",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": [
        "扁豆焖面"
      ]
    },
    {
      "username": "3******b",
      "rateTime": 1469261964000,
      "score": 3,
      "rateType": 1,
      "text": "",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "1******c",
      "rateTime": 1469261864000,
      "deliveryTime": 20,
      "score": 5,
      "rateType": 0,
      "text": "良心店铺",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "2******d",
      "rateTime": 1469251264000,
      "deliveryTime": 10,
      "score": 4,
      "rateType": 0,
      "text": "",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "9******0",
      "rateTime": 1469241964000,
      "deliveryTime": 70,
      "score": 1,
      "rateType": 1,
      "text": "送货速度蜗牛一样",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "d******c",
      "rateTime": 1469231964000,
      "deliveryTime": 30,
      "score": 5,
      "rateType": 0,
      "text": "很喜欢的粥店",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "2******3",
      "rateTime": 1469221264000,
      "deliveryTime": "",
      "score": 4,
      "rateType": 0,
      "text": "量给的还可以",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "3******8",
      "rateTime": 1469211964000,
      "deliveryTime": "",
      "score": 3,
      "rateType": 1,
      "text": "",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "a******a",
      "rateTime": 1469201964000,
      "deliveryTime": "",
      "score": 4,
      "rateType": 0,
      "text": "孩子喜欢吃这家",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": [
        "南瓜粥"
      ]
    },
    {
      "username": "3******3",
      "rateTime": 1469191264000,
      "deliveryTime": "",
      "score": 4,
      "rateType": 0,
      "text": "粥挺好吃的",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "t******b",
      "rateTime": 1469181964000,
      "deliveryTime": "",
      "score": 3,
      "rateType": 1,
      "text": "",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "f******c",
      "rateTime": 1469171964000,
      "deliveryTime": 15,
      "score": 5,
      "rateType": 0,
      "text": "送货速度很快",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "k******3",
      "rateTime": 1469161264000,
      "deliveryTime": "",
      "score": 4,
      "rateType": 0,
      "text": "",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "u******b",
      "rateTime": 1469151964000,
      "deliveryTime": "",
      "score": 4,
      "rateType": 0,
      "text": "下雨天给快递小哥点个赞",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "s******c",
      "rateTime": 1469141964000,
      "deliveryTime": "",
      "score": 4,
      "rateType": 0,
      "text": "好",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "z******3",
      "rateTime": 1469131264000,
      "deliveryTime": "",
      "score": 5,
      "rateType": 0,
      "text": "吃了还想再吃",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "n******b",
      "rateTime": 1469121964000,
      "deliveryTime": "",
      "score": 3,
      "rateType": 1,
      "text": "发票开的不对",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "m******c",
      "rateTime": 1469111964000,
      "deliveryTime": 30,
      "score": 5,
      "rateType": 0,
      "text": "好吃",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "l******3",
      "rateTime": 1469101264000,
      "deliveryTime": 40,
      "score": 5,
      "rateType": 0,
      "text": "还不错吧",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "3******o",
      "rateTime": 1469091964000,
      "deliveryTime": "",
      "score": 2,
      "rateType": 1,
      "text": "",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "3******p",
      "rateTime": 1469081964000,
      "deliveryTime": "",
      "score": 4,
      "rateType": 0,
      "text": "很喜欢的粥",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "o******k",
      "rateTime": 1469071264000,
      "deliveryTime": "",
      "score": 5,
      "rateType": 0,
      "text": "",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    },
    {
      "username": "k******b",
      "rateTime": 1469061964000,
      "deliveryTime": "",
      "score": 4,
      "rateType": 0,
      "text": "",
      "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small",
      "recommend": []
    }
  ]
}

data.json

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* custom */
a {
    color: #7e8c8d;
    text-decoration: none;
    -webkit-backface-visibility: hidden;
}

li {
    list-style: none;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
}

html, body {
    width: 100%;
    line-height: 1;
    font-weight: 200;
    font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif;
}

body {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

static/css/reset.css

1.2 配置API接口，模拟后台数据返回顶部

　　1、说明

　　　　　　1. 在使用vue开发过程中，难免需要去本地数据地址进行请求，而原版配置在dev-server.js中

　　　　　　2. 新版vue-webpack-template已经删除dev-server.js，改用webpack.dev.conf.js代替，所以配置本地访问在webpack.dev.conf.js里配置即可。
　　2、修改 build\webpack.dev.conf.js 文件

　　　　1. 在 const portfinder = require('portfinder')  后添加

// ################### 第一步：使用express框架启动一个服务器 ########################
// https://blog.csdn.net/qq_34645412/article/details/78833860

const express = require('express');
const app = express();                       //请求server
var appData = require('../data.json');      //加载本地数据文件

var seller = appData.seller;                 //获取对应的本地数据
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();
app.use('/api', apiRoutes);                 //通过路由请求数据

// #######################################################

第一步：在 const portfinder = require('portfinder') 后添加

　　　　2. 找到devServer,在里面加上before（）方法

    // #################   第二步：找到devServer,在里面添加  ###############
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
      }),
        app.get('/api/goods', (req, res) => {
          res.json({
            errno: 0,
            data: goods
          })
        }),
        app.get('/api/ratings', (req, res) => {
          res.json({
            errno: 0,
            data: ratings
          })
        })
    },
    // #####################################################

第二步：找到 devServer ,在里面加上 before（）方法

　　3、测试接口

　　　　　　注：测试接口前记得重启服务：npm run dev

　　　　　　http://127.0.0.1:8080/api/seller

　　　　　　http://127.0.0.1:8080/api/goods

　　　　　　http://127.0.0.1:8080/api/ratings

1.3 项目整体结构化开发返回顶部

　　　　

　　1、 itaniy/index.html （项目根目录的）

　　　　　　1.  itaniy/index.html 定义项目整体的css样式等

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>itany</title>

    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="static/css/reset.css">

  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

itaniy/index.html

　　2、src/main.js  和 src/App.vue

　　　　　　1. main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。

　　　　　　2. App.vue 是我们的主组件，所有页面都是在App.vue下进行切换的。
　　　　   　　其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store/index.js'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
});

src/main.js

<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
  import Header from './components/header/Header.vue'

  export default {
    components:{
      'v-header':Header
    }
  }
</script>

<style lang="less" scoped>
  #app .tab{
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid rgba(7,17,27,0.1);
  }
  .tab-item{
    flex:1;
    text-align: center;
  }
  .active{
    color: red;
  }
</style>

src/App.vue

　　3、src\router\index.js 

　　　　　　1. src\router\index.js 定义路由信息

import Vue from 'vue'
import Router from 'vue-router'
import Goods from '../components/goods/Goods.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path:'/goods',
      component:Goods
    }
  ],
  linkActiveClass:'active'
})

src\router\index.js

　　4、src\components（定义组件）

<template>
  <div class="header">
    {{seller.name}}
    <img :src="seller.avatar" alt="" @click="showDetail">
    <br>
    {{msg}}

    <!-- 弹出层 -->
    <Detail></Detail>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Detail from '../detail/Detail.vue'

  export default {
    // 在这里获取 seller.js 中 getSeller方法，获取seller数据
    created(){
      this.$store.dispatch('getSeller');
    },
    // 通过计算属性获取 seller.js中的 seller 方法获取的数据
    computed:{
      ...mapGetters([   // ES6中，三个点是对象展开运算符
        'seller'
      ]),
      msg(){  // 自定义计算属性
        return 'welcome to itany king';
      }
    },

    // 注册Detail组件
    components:{
      Detail
    },
    methods:{
      showDetail(){
        this.$store.dispatch('showDetail');
      }
    }
  }
</script>

<style lang="less" scoped>
  .header{
    height: 134px;
    background-color: rgba(7,17,27,0.1);
    font-size: 14px;
  }
  img{
    width: 64px;
    height:64px;
    border-radius: 2px;
  }
</style>

src\components\header\Header.vue 定义页面头部

<template>
  <!-- 使用transition 实现动画效果： 从右边入，从右边出-->
    <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
        <div class="detail" v-show="detailShow">
            详情页
            <br>
            <br>
            <h2>{{seller.name}}</h2>
            <br>
            <h2>{{seller.bulletin}}</h2>
            <br>
            <ul>
                <li v-for="item in seller.supports">
                    {{item.description}}
                </li>
            </ul>

            <button @click="hideDetail" class="close">关闭</button>
        </div>
    </transition>
</template>

<script>
    import {mapGetters} from 'vuex'
    import 'animate.css/animate.css'

    export default {
        computed:{
            ...mapGetters([
                'detailShow',
                'seller'
            ])
        },
        methods:{
            hideDetail(){
                this.$store.dispatch('hideDetail');
            }
        }
    }
</script>

<style lang="less" scoped>
    .detail{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 666;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(7,17,27,0.8);
        color:#fff;
    }
  .detail .close{
    position: absolute;
    bottom: 50px;
    left:40%;
  }
</style>

src\components\detail\Detail.vue 定义商家详情

<template>
    <div class="goods">
        <div class="menu-wrapper">
            <ul>
                <li v-for="item in goods">
                    {{item.name}}
                </li>
            </ul>
        </div>
        <div class="foods-wrapper">
            <ul>
                <li v-for="item in goods">
                    <h1>{{item.name}}</h1>
                    <ul>
                        <li v-for="food in item.foods">
                            <img :src="food.icon" alt="">
                            {{food.name}}
                        </li>
                    </ul>
                    <hr>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        created(){
            this.$store.dispatch('getGoods');
        },
        computed:mapGetters([
            'goods'
        ])
    }
</script>

<style lang="less" scoped>
    .goods{
        display: flex;
        position: absolute;
        top:174px;
        bottom: 46px;
        overflow: auto;
    }
  .menu-wrapper{
    flex:0 0 80px;
    width: 80px;
    background-color: #f3f5f7;
  }
  .foods-wrapper{
    flex:1;
  }
</style>

src\components\goods\Goods.vue 展示商品信息

　　5、src\store (使用vuex实现模块化)

　　　　1. 新建下面目录结构

|-store
    |-index.js                  // 我们组装模块并导出 store 的地方
    |-getters.js                // 公共的 getters (用来获取公共属性)
    |-actions.js                // 根级别的 action (提交公共改变)
    |-mutations.js              // 根级别的 mutation (处理状态，数据的改变)
    |-types.js                  // 定义类型常量(commit中提交的常量)

    |-modules                   //分为多个模块，每个模块都可以拥有自己的state、getters、actions、mutations
        |-seller.js             // 商家信息
        |-goods.js              // 商品详情
        |-ratings.js            // 用户评论

　　　　2. 具体内容

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import seller from './modules/seller'
import goods from './modules/goods'
import ratings from './modules/ratings'

Vue.use(Vuex);

export default new Vuex.Store({
  getters,
  actions,
  modules:{
    seller,
    goods,
    ratings
  }
});

store\index.js

const GET_SELLER="GET_SELLER";
const SHOW_DETAIL="SHOW_DETAIL";  // 显示上家详情
const HIDE_DETAIL="HIDE_DETAIL";  // 隐藏上家详情
const GET_GOODS='GET_GOODS';

export default {
  GET_SELLER,
  SHOW_DETAIL,
  HIDE_DETAIL,
  GET_GOODS
}

store\types.js

const actions={

};

export default actions;

store\actions.js

const getters={

};

export default getters;

store\getters.js

import types from '../types.js'
import axios from 'axios'  // 由于seller.js不是组件，不可以全局引入后每个组件都可以用 axios

const state={
  seller:{},            // 定义一个变量接收请求获取的数据
  detailShow:false
};

const getters={
  seller(state){   // 在Header.vue组件中调用的seller方法就是这个方法，来获取数据
    return state.seller;
  },
  detailShow(state){
    return state.detailShow;
  }
};

const actions={
  getSeller({commit,state}){
    axios.get('/api/seller').then(resp => {
      // console.log(resp);
      if(resp.data.errno==0){
        commit(types.GET_SELLER,resp.data.data);
        // 将types.GET_SELLER()【事件类型名称】，resp.data.data()【获取的数据】传给 mutations
      }
    });
  },
  showDetail({commit}){  // 利用vuex实现组件间通信
    commit(types.SHOW_DETAIL);
  },
  hideDetail({commit}){
    commit(types.HIDE_DETAIL);
  }
};

const mutations={
  [types.GET_SELLER](state,data){   // 参数state是state对象，data是commit获取并传入的数据
    state.seller=data;             // 将commit获取的数据重新赋值给state中定义的空字典seller
  },
  [types.SHOW_DETAIL](state){      // 将商家详情显示改成 true
    state.detailShow=true;
  },
  [types.HIDE_DETAIL](state){
    state.detailShow=false;
  }
};

export default {
  state,
  getters,
  actions,
  mutations
}

store\modules\seller.js

import types from '../types.js'
import axios from 'axios'

const state={
  goods:[]
};

const getters={
  goods(state){
    return state.goods;
  }
};

const actions={
  getGoods({commit,state}){
    axios.get('/api/goods').then(resp => {
      if(resp.data.errno==0){
        commit(types.GET_GOODS,resp.data.data);
      }
    });
  }
};

const mutations={
  [types.GET_GOODS](state,data){
    state.goods=data;
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

store\modules\goods.js

import types from '../types.js'

const state={

};

const getters={

};

const actions={

};

const mutations={

};

export default {
  state,
  getters,
  actions,
  mutations
}

store\modules\ratings.js

　　6、效果

　　　　　　1. 点击图片显示 Detail.vue组件中的内容(显示上家详情)

　　　　　　2. 点击商品显示商品列表

　　　　　　

1.4 项目简化版返回顶部

　　１、初始化项目

　　　　　　vue init webpack itany

　　　　　　cd itany

　　　　　　cnpm install

　　　　　　cnpm install less less-loader -D

　　　　　　cnpm install vuex axios -S

　　　　　　cnpm install animate.css -S            // 项目中切换页面实现动画效果，所以安装 animate.css 模块

　　　　　　npm run dev

　　2、文件结构 

|-data.json
|-build
    |-webpack.dev.conf.js
|-src
    |-main.js                       // 项目入口文件
    |-App.vue

    |-store
        |-index.js                  // 我们组装模块并导出 store 的地方
        |-modules                   // 分为多个模块，每个模块都可以拥有自己的state、getters、actions、mutations
            |-goods.js              // 商品模块（这里仅以goods模块作为事例）
    |-router
        |-index.js              // 路由模块

    |-components
        |-header
            |-Header.vue            // 页面头部
        |-goods
            |-Goods.vue             // 商品页

　　3、文件

{
  "goods": [{
    "name": "热销榜",
    "type": -1,
    "foods": [{
      "name": "皮蛋瘦肉粥",
      "price": 10,
      "oldPrice": "",
      "description": "咸粥",
      "sellCount": 229,
      "rating": 100,
      "info": "一碗皮蛋瘦肉粥，总是我到粥店时的不二之选。香浓软滑，饱腹暖心，皮蛋的Q弹与瘦肉的滑嫩伴着粥香溢于满口，让人喝这样的一碗粥也觉得心满意足",
      "ratings": [{
        "username": "3******c",
        "rateTime": 1469281964000,
        "rateType": 0,
        "text": "很喜欢的粥",
        "avatar": "http://bbs.itany.com/uc_server/data/avatar/000/00/00/36_avatar_small.jpg"
      },
        {
          "username": "2******3",
          "rateTime": 1469271264000,
          "rateType": 0,
          "text": "",
          "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
        },
        {
          "username": "3******b",
          "rateTime": 1469261964000,
          "rateType": 1,
          "text": "",
          "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
        }
      ],
      "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
      "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
    },
      {
        "name": "扁豆焖面",
        "price": 14,
        "oldPrice": "",
        "description": "",
        "sellCount": 188,
        "rating": 96,
        "ratings": [{
          "username": "3******c",
          "rateTime": 1469281964000,
          "rateType": 0,
          "text": "",
          "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
        },
          {
            "username": "2******3",
            "rateTime": 1469271264000,
            "rateType": 0,
            "text": "",
            "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
          },
          {
            "username": "3******b",
            "rateTime": 1469261964000,
            "rateType": 1,
            "text": "",
            "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
          }
        ],
        "info": "",
        "icon": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/114/h/114",
        "image": "http://fuss10.elemecdn.com/c/6b/29e3d29b0db63d36f7c500bca31d8jpeg.jpeg?imageView2/1/w/750/h/750"
      }
    ]
  },
    {
      "name": "冰爽饮品限时特惠",
      "type": 1,
      "foods": [{
        "name": "VC无限橙果汁",
        "price": 8,
        "oldPrice": 10,
        "description": "",
        "sellCount": 15,
        "rating": 100,
        "info": "",
        "ratings": [{
          "username": "3******c",
          "rateTime": 1469281964000,
          "rateType": 0,
          "text": "还可以",
          "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
        },
          {
            "username": "2******3",
            "rateTime": 1469271264000,
            "rateType": 0,
            "text": "",
            "avatar": "http://bbs.itany.com/uc_server/avatar.php?uid=12&size=small"
          }
        ],
        "icon": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/114/h/114",
        "image": "http://fuss10.elemecdn.com/e/c6/f348e811772016ae24e968238bcbfjpeg.jpeg?imageView2/1/w/750/h/750"
      }]
    }
  ]
}

data.json 后台数据

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

// ################### 第一步：使用express框架启动一个服务器 ########################
// https://blog.csdn.net/qq_34645412/article/details/78833860

const express = require('express');
const app = express();                       //请求server
var appData = require('../data.json');      //加载本地数据文件

var seller = appData.seller;                 //获取对应的本地数据
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();
app.use('/api', apiRoutes);                 //通过路由请求数据

// #######################################################

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    // #################   第二步：找到devServer,在里面添加  ###############
    before(app) {
        app.get('/api/goods', (req, res) => {
          res.json({
            errno: 0,
            data: goods
          })
        })
    },
    // #####################################################

    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

build/webpack.dev.conf.js模拟后台数据

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store/index'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

src/main.js 项目入口文件

<template>
  <div id="app">
    <v-header></v-header>
    <router-view/>
  </div>
</template>

<script>
  import Header from './components/header/Header'
export default {
  components:{
    'v-header':Header
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/App.vue

import Vue from 'vue'
import Vuex from 'vuex'
import goods from './modules/goods'

Vue.use(Vuex)

export default new Vuex.Store({
  modules:{
    goods
  }
})

store/index.js 我们组装模块并导出 store 的地方

import axios from 'axios'

//1、定义属性(数据)
const state = {
  goods:[]
};

//2、定义gettters获取属性：在组件中使用 辅助函数 访问 vuex 组件中数据调用此函数
const getters = {
  goods(state){
    return state.goods;
  }
};

//3、定义actions提交变化：其他组件中调用的方法()
const actions = {
  getGoods({commit,state}){
    axios.get('/api/goods').then(resp=> {
      if(resp.data.errno == 0){
        commit('getGoods',resp.data.data)
      }
    })
  }
};

//4、定义mutations定义变化,处理状态（数据的改变）
const mutations = {
  getGoods(state, data){
    state.goods=data;
  }
};

//5、导出store对象
export default {
  state,
  getters,
  actions,
  mutations,
}

store/modules/goods.js 商品模块

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Goods from '../components/goods/Goods'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/goods',
      name:'Goods',
      component:Goods
    }
  ]
})

router/index.js 路由

<template>
    <div class="header">
      <h1>I Am Header</h1>
    </div>
</template>

<script>
    export default {
        name: ""
    }
</script>

<style scoped>
  .header{
    height: 90px;
    background-color: #f3f5f7;
    width: 100%;
  }

</style>

components/header/Header.vue 页面头部组件

<template>
  <div class="goods">
    <div class="menu-wrapper">
      <ul>
        <li v-for="item in goods">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="foods-wrapper">
      <ul>
        <li v-for="item in goods">
          <h1>{{item.name}}</h1>
          <ul>
            <li v-for="food in item.foods">
              <img :src="food.icon" alt="">
              {{food.name}}
            </li>
          </ul>
          <hr>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    created(){
      this.$store.dispatch('getGoods');
    },
    computed:mapGetters([
      'goods'
    ])
  }
</script>

<style lang="less" scoped>

</style>

components/header/Goods.vue 商品组件

　　4、测试

　　　　　　http://localhost:8080/api/goods    # 测试接口

　　　　　　http://localhost:8080/#/goods      # 打开goods页面