axios請求本地json,相關(guān)依賴安裝
1：npm安裝
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
一切環(huán)境依賴搭建好之后,下面來寫個例子：axios請求本地json
1：在static文件夾底下新建json文件杀怠，（ 本地JSON文件一定要需放在static文件夾之下。）
訪問服務(wù)器文件，應(yīng)該把 json文件放在最外層的static文件夾宪祥，這個文件夾是vue-cli內(nèi)置服務(wù)器向外暴露的靜態(tài)文件夾殉簸。
2：data.json數(shù)據(jù)格式如下：
{
"first":[
{"name":"王小婷","nick":"祈澈菇?jīng)?},
{"name":"安安","nick":"壞兔子"},
{"name":"編程微刊","nick":"簡書"}
]
}
3：寫一個axios
getData() {
axios.get('../../static/data.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
4：整體代碼如下：
<template>
<div id="app">
</div>
</template>
<script>
import axios from "axios";
export default {
name: "app",
data() {
return {
itemList: []
}
},
mounted() {
this.getData();
},
methods: {
getData() {
axios.get('../../static/data.json').then(response => {
console.log(response.data);
}, response => {
console.log("error");
});
}
}
}
</script>
5：前臺顯示：
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子摇予，愛編程存皂，愛運營档叔，文藝與代碼齊飛瓶佳，魅力與智慧共存的程序媛一枚芋膘。
堅持總結(jié)工作中遇到的技術(shù)問題，堅持記錄工作中所所思所見霸饲，對于博客上面有不會的問題为朋，歡迎加入編程微刊主頁qq群。
