在vue中讀取本地Json文件的方法

更新時(shí)間：2018年09月06日 11:19:25 作者：小陽style

今天小編就為大家分享一篇在vue中讀取本地Json文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

其實(shí)關(guān)于這個(gè)問題，網(wǎng)上已經(jīng)可以找到些方法，不過基本上沒有完整的，或者是其中有些坑，下面寫一下自己的親身實(shí)踐。

使用vue讀取本地json文件需要安裝vue-resource插件，然后使用它的$http.get來讀取json文件。

json文件應(yīng)該是必須放在static目錄下

然后使用npm install 命令安裝vue-resource，太慢的話就使用淘寶鏡像安裝,安裝完成后先引用這個(gè)組件。

在main.js文件中添加：

import VueResource from 'vue-resource'

然后：

Vue.use(VueResource)

最后讀取json數(shù)據(jù)：

this.$http.get('static/map/china.json').then(res => {
 console.log("json數(shù)據(jù)為:" + res.body)//此處的res對(duì)象包含了json的文件信息和數(shù)據(jù)，我們需要的json數(shù)據(jù)存在于body屬性中
})

這樣就能讀取json數(shù)據(jù)了！

以上這篇在vue中讀取本地Json文件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2.0 datepicker使用方法
這篇文章主要介紹了vue2.0 datepicker的使用方法，非常不錯(cuò)，具有參考借鑒借鑒價(jià)值，需要的朋友參考下
2018-02-02
vue實(shí)現(xiàn)token登錄驗(yàn)證的完整實(shí)例
最近公司新啟動(dòng)了個(gè)項(xiàng)目，用的是vue框架在做,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)token登錄驗(yàn)證的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
vue3+ts+Vuex中使用websocket協(xié)議方式
這篇文章主要介紹了vue3+ts+Vuex中使用websocket協(xié)議方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue項(xiàng)目接口管理,所有接口都在apis文件夾中統(tǒng)一管理操作
這篇文章主要介紹了vue項(xiàng)目接口管理,所有接口都在apis文件夾中統(tǒng)一管理操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue實(shí)現(xiàn)水波漣漪效果的點(diǎn)擊反饋指令
鼠標(biāo)移入時(shí)的小手、鼠標(biāo)點(diǎn)擊時(shí)按鈕下壓彈起的動(dòng)畫、觸屏應(yīng)用點(diǎn)擊時(shí)的屏幕震動(dòng)，這些效果也被統(tǒng)稱為點(diǎn)擊反饋，雖然看似是應(yīng)用中的細(xì)枝末節(jié)，但是只要稍微投入一點(diǎn)點(diǎn)心思，帶來的用戶體驗(yàn)提升是十分明顯的,這里作者為小伙伴們推薦一種作者最喜歡的點(diǎn)擊反饋效果。
2021-05-05
Vue的hover/click事件如何動(dòng)態(tài)改變顏色和背景色
這篇文章主要介紹了Vue的hover/click事件如何動(dòng)態(tài)改變顏色和背景色問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue實(shí)現(xiàn)按鈕的長按功能
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕的長按功能,點(diǎn)擊按鈕實(shí)現(xiàn)長按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應(yīng)的事件，本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)思路，感興趣的朋友一起看看吧
2022-01-01
vue2手機(jī)APP項(xiàng)目添加開屏廣告或者閃屏廣告
這篇文章主要為大家詳細(xì)介紹了vue2手機(jī)APP項(xiàng)目添加開屏廣告或者閃屏廣告的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
Vue中偵聽器的基本用法示例
隨著Vue的使用越來越多,對(duì)Vue的其他知識(shí)點(diǎn)也開始逐漸多了解一點(diǎn),這次做頁面上的計(jì)算,用了Watch偵聽器,這篇文章主要給大家介紹了關(guān)于Vue中偵聽器基本用法的相關(guān)資料,需要的朋友可以參考下
2021-08-08
解決element-ui中下拉菜單子選項(xiàng)click事件不觸發(fā)的問題
今天小編就為大家分享一篇解決element-ui中下拉菜單子選項(xiàng)click事件不觸發(fā)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08