Webstorm開發Vue專案模擬資料的前後臺互動

1、使用命令進入專案所在目錄，載入vue-resource(一定要放在專案所在的目錄下)

cd  H:\vue\demo   ###這個是我的專案所在的目錄

npm install vue-resource  --save   ###安裝vue-resource

2、修改main.js 載入vue-resource

router VueResource Vue..= Vue.(VueResource)

3、在webpack.dev.conf.js中直接改

在 const portfinder = require('portfinder')後面直接加上
let app =  express()//請求server資料
let appData = require('../data.json')//載入本地資料
let seller = appData.seller//獲取json物件賣家資訊
let goods = appData.goods//獲取json物件商品資訊
let ratings = appData.ratings//獲取json物件評價資訊
let apiRoutes = express.Router()//設定路由
app.use('/api',apiRoutes)//設定路由路徑

4、同在webpack.dev.conf.js中找到devServer =>watchOptions 在這之後添加註意一定要在 watchOptions結束後新增逗號

before (app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      errno: 0,
      data: seller
    })//介面返回json資料，上面配置的資料seller就賦值給data請求後呼叫
  })
}

5、準備data.json 資料格式的資料 本例是來著慕課網提供的json

npm run dev

6、測試訪問資料

小助手：有強迫症患者請設定

webstorm在專案中經常提示require is not function ,原因沒有開啟node.js 語言提示功能

解決方式

這樣就不會提示node.js 自身定義的函式報錯了