vuejs仿美团，饿了么项目之——axios篇

这篇主要写一下如何获取json数据，我自己写了个简单的json数据放在根目录的data文件夹中。自己写的要注意下格式，比如最后一项不能有逗号，键值对都要加双引号等，可以去网上找下json格式校验工具校验一下是否正确。

1. vue-resource获取，因为官网已经不再维护了。所以就不说了，跟axios用法差不多
2. axios
   下载，引入，并配置下全局，方便在各个组件中应用，虽然不太推荐，但是很方便。
   main.js中：

import axios from 'axios'
Vue.prototype.$axios = axios

good组件中，引入axios模块。在钩子函数created下获取本地的json数据。这样是为了等待DOM完全渲染。

import axios from 'axios'

created() {
    axios.get('data/good.json').then(res => {
        this.menu = res.data.data.menu
        this.food = res.data.data.food
  })
}

3. fetch
   es6的fetch也可以使用，因为脚手架已经帮我们搭建好了本地的服务器，所以在webpack.config.js中配置一个接口，再用fetch请求这个接口。

const express = require('express')
const app = express()
var good = require('./data/good.json')

devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    before(app) {
      app.get('/api/good', (req, res) => res.json(good))
    }
  },

fetch('/api/good')
.then(res => res.json())
.then(res => {
    this.menu = res.data.menu;
    this.food = res.data.food
}