vue餓了嗎學習筆記（一）

最近在學習慕課網的vue.js高仿餓了麼外賣APP，在專案準備時就遇到了webpack版本問題。視訊中使用的webpack是1.12.2，而現在的webpack
版本已經到了3.6，原先的程式碼已經不適用了。

言歸正傳，當我們想給我們的mock data設定一個介面請求，原版本是配置在dev-server.js，新版的vue-webpack-template刪除了dev-server.js檔案，改用webpack.dev.conf.js代替。

首先，我們將mock data提取出來

// 使用express獲取mock資料
const express = require
 
('express');
const app = express();

const appDate = require('../data.json');
const seller = appDate.seller;
const goods = appDate.goods;
const ratings = appDate.ratings;
// end

在devServer的devServer.before裡配置get請求的Router，關於devServer.before()，可以檢視webpack官方文件，它提供在伺服器內部的所有其他中介軟體之前執行定製中介軟體的功能，用來定義自定義處理程式。

具體程式碼：

   // webpack.dev.conf.js
   // 為mock資料配置路由
   before(app) {
     app.get('/api/seller', function (req, res) {
       res.json({
         errno: 0,
         data: seller
       });
     });
     app.get('/api/goods', function (req, res) {
       res.json({
         errno: 0,
         data: goods
       });
     });
     app.get
 
('/api/ratings', function (req, res) {
       res.json({
         errno: 0,
         data: ratings
       });
     });
   }

這樣，mock資料就已經成功建立了api介面了。