Webstorm開發Vue項目模擬數據的先後臺交互vue
一、使用命令進入項目所在目錄,加載vue-resource(必定要放在項目所在的目錄下)node
cd H:\vue\demo ###這個是個人項目所在的目錄
npm install vue-resource --save ###安裝vue-resource
二、修改main.js 加載vue-resourcewebpack
import VueResource from 'vue-resource' Vue.config.productionTip = false Vue.use(VueResource)
三、在webpack.dev.conf.js中直接改web
在 const portfinder = require('portfinder')後面直接加上 const express = require('express') 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)//設置路由路徑
四、同在webpack.dev.conf.js中找到devServer =>watchOptions 在這以後添加註意必定要在 watchOptions結束後添加逗號express
before (app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, data: seller })//接口返回json數據,上面配置的數據seller就賦值給data請求後調用 }) }
五、準備data.json 數據格式的數據 本例是來着慕課網提供的jsonnpm
npm run dev
六、測試訪問數據
json
小助手:有強迫症患者請設置api
webstorm在項目中常常提示require is not function ,緣由沒有開啓node.js 語言提示功能bash
解決方式app
這樣就不會提示node.js 自身定義的函數報錯了