vue-cliプロジェクトはvue-resourceを使用してローカルのjsonデータを取得する方法(シミュレーションサービス側からデータを返す)

最近vue-cliを使用して小さなプロジェクトを作りました.プロジェクトではvue-resourceを使用してバックグラウンドとデータのインタラクションを行う必要があるので、ローカルjsonデータを使用してバックグラウンドでデータを取得するプロセスを真似しました.vue-resourceのインストールとjsonの準備については、後述しませんが、、、以下は操作方法です.
1、まずプロジェクトの構造を紹介する:ローカルのjsonファイルを最外層とindexに置く.htmlが一緒にいて、一応dataと言います.json.
私のjsonデータファイルは大体こうです.

{
  "seller": {
      "name": "    （   ）",
      "description": "    ",
      "bulletin": "        。",
      "avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
  },
  "goods": [
      {
        "name": "   ",
        "type": -1
      },
      {
        "name": "   ",
        "type": -1
      }
  ],
  "ratings": [
    {
      "username": "3******c",
      "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
      "recommend": [
        "   ",
        "     "
      ]
    },
    {
      "username": "2******3",
      "avatar": "http://static.galileo.xiaojukeji.com/static/tms/default_header.png",
      "recommend": [
        "    "
      ]
    }
  ]
}

2、続いてbuildのdev-server.jsにコードを追加するには:

//         --  
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();

apiRoutes.get('/seller', function (req, res) {
  res.json({
    errno: 0,
    data: seller
  });
});

apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  });
});

apiRoutes.get('/ratings', function (req, res) {
  res.json({
    errno: 0,
    data: ratings
  });
});

app.use('/api', apiRoutes);
//         --  

特に注意:変更後にcnpm run devを再実行します(dev-server.jsとdb.jsonが変更された場合、この手順が必要であることに注意してください).
以上のコードを説明する:1』まずルートディレクトリの下のdataを要求する.jsonファイルは、ファイルの内容を取得してappData変数に値を割り当て、各フィールドデータを取得し、変数seller、goods、ratingsをそれぞれ定義して値を割り当てます.2』の後、インタフェース(要求パス)を設定し、要求が成功した後のコールバック関数を用いて、要求側に返されるデータを処理する.(errnoというjsリクエストのcode値のようなもの)3」最後に、このRouterオブジェクトを「使用」し、apiインタフェースを統一的に管理するために、要求するルーティングの前に「api/」を加えて、apiデータを提供するためにこのパスが専用であることを示します.この「インタフェース」では、「http://localhost:8080/api/sites」パスするとdbに戻ります.jsonのsitesオブジェクトをください.
3、resouceを使用してこれらのデータを取得し、

export default{
  data () {
    return {
      seller: {}
    };
  },
  created () {
    this.$http.get('/api/seller').then((response) => {
      // console.log(response);
      response = response.body;
      const ERR_OK = 0;
      if (response.errno === ERR_OK) {
        let data = response.data;
        console.log(data);
      }
    });
  },
  components: {
    'v-header': header
  }
};