Vue專案載入本地的json資料模擬請求後臺資料
1. 安裝express和axios
npm i express --save & npm i axios --save
網速不好的,可以安裝淘寶映象,使用cnpm
2. 在main.js中引入axios,並掛載到全域性
import axios from ‘axios’;
Vue.prototype.$axios = axios;
3.在專案中static(靜態資源)中,新建一個儲存本地JSON資料
4. 在build/webpack.dev.conf.js中配置express並設定路由規則
// 增加express start
const express = require('express');
const app = express();
const appData = require('../static/json/appData.json'); //匯入本地的json資料
const runRedLight = appData.runRedLight;
const redLightRoad = appData.redLightRoad;
const apiRoutes = express.Router();
app.use('/api',apiRoutes);
// 增加express end
5.在build/dev-server.js中新增路由規則
//express start
before(app){
app.get('/api/light',(reg,res)=>{
res.json({
errno:0,
data:runRedLight
})
}),
app.get('/api/road',(reg,res)=>{
res.json({
errno:0,
data:redLightRoad
})
})
}
//express end
6.最後在各元件(xxx.vue)中使用了