vue如何加載本地json文件

這篇“vue如何加載本地json文件”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“vue如何加載本地json文件”文章吧。

整個(gè)項(xiàng)目是由webpack打包而成。具體項(xiàng)目結(jié)構(gòu)如下：

1：打包好的文件

2：我們找到bulid>dev-server.js,然后打開(kāi)

3：在里面加入這段代碼，大概在17行）。

var app = express() //從這后面開(kāi)始加

var appData = require('../data.json');

var seller = appData.seller;

var goods = appData.goods;

var ratings = appData.ratings;

 

var apiRoutes = express.Router();

 

apiRoutes.get('/seller',function (req,res) {

 res.json({

  errno:0,

  data:seller

 });

});

 

apiRoutes.get('/goods',function (req,res) {

 res.json({

  errno:0,

  data:goods

 });

});

 

apiRoutes.get('/ratings',function (req,res) {

 res.json({

  errno:0,

  datta:ratings

 });

});

app.use('/api',apiRoutes);

4：使用方法：

你可以在瀏覽器地址欄填寫(xiě)http://localhost:8080/api/seller  或者h(yuǎn)ttp://localhost:8080/api/goods  或者h(yuǎn)ttp://localhost:8080/api/ratings   查看數(shù)據(jù)

因?yàn)榧虞d的json數(shù)據(jù)沒(méi)有格式，看起來(lái)很亂，所以我們可以使用谷歌的擴(kuò)展程序JSONView。

貼上讀取數(shù)據(jù)的頁(yè)面

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

以上就是關(guān)于“vue如何加載本地json文件”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。