這篇主要寫一下如何獲取json數(shù)據(jù)，我自己寫了個簡單的json數(shù)據(jù)放在根目錄的data文件夾中。自己寫的要注意下格式，比如最后一項不能有逗號，鍵值對都要加雙引號等，可以去網(wǎng)上找下json格式校驗工具校驗一下是否正確。

1. vue-resource獲取，因為官網(wǎng)已經(jīng)不再維護了。所以就不說了，跟axios用法差不多
2. axios
   下載，引入，并配置下全局，方便在各個組件中應用，雖然不太推薦，但是很方便。
   main.js中：

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

good組件中，引入axios模塊。在鉤子函數(shù)created下獲取本地的json數(shù)據(jù)。這樣是為了等待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也可以使用，因為腳手架已經(jīng)幫我們搭建好了本地的服務器，所以在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
}