Vue在项目中如何引入本地Json数据
作者：绪锋
这篇文章主要介绍了Vue在项目中如何引入本地Json数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue在项目中引入本地Json数据
模拟的Json数据放入项目的根目录中。
在build文件夹中，找到 webpack.dev.conf.js ,我们需要在这个js文件中配置Json
在它后面加上配置数据就OK
//第一步 const portfinder = require('portfinder'),在后面加上
const express = require('express');
const app = express();//请求server
const appData = require('../data.json');//加载本地数据文件
const goodsList = appData.goodsList;//获取对应的本地数据
const apiRoutes = express.Router();
app.use('/api', apiRoutes);//通过路由请求数据 //第二步找到devServer,在里面添加
before(app) {
app.get('/api/goodsList', (req, res) => {
res.json({
errno: 0,
data: goodsList
})//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
})
}引入成功了的话，可以尝试加载数据，Vue-cli 默认是8080端口，我这里是修改了，根据自己的进行修改
下面将介绍
如何在项目中展示Json数据
/*请求Json数据*/
const ERR_OK = 0;
export default {
data() {
return {
goodsList:[]
}
},
created() {
this.$http.get('/api/goodsList').then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.goodsList = response.data;
}
});
}
}在 template 中，我们可以这样去加载数据
<li class="goods-item" v-for="goodsTab in goodsList" >{{goodsTab.name}}</li>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。