1.Webpack.dev.cong.js 模擬後台數據接口

如果已經有架設好的JSON資料格式，那就不需要進行第一步驟，請直接忽略

在build/webpack.dev.conf.js下

1.需導入express()

PS 需要在const portfinder = require('portfinder')後面添加

const express = require('express')

2.創建express instance

const app = express()

3.讀取JSON資料

var xxx = require('xxx/xxx/xxx.json');

4.編寫接口

要編輯在devserver:{...}中

***任何在Build or Config資料夾下面的更動都需要重新Run一次npm run dev才會生效

devServer:{

.....
...
..

before(app){
app.get('api/xxx', (req,res) =>{
//回傳json數據
res.json(xxx);
}
}
}

依照上方的接口設定，若配置正確，輸入下方網址應該就會看到Json資料

http://localhost:8080/api/xxx

所以說，如果已經有架設好的JSON資料格式，那就不需要進行第一步驟，請直接忽略

2.導入Axios套件

因為Vue-cil並沒有幫我們安裝axios套件，因此需要另外安裝

$ npm install axios

接下來要在main.js中，導入axios套件庫

並創建資料傳輸通道

import Axios from 'axios'

//創建資料傳輸通道，採用Axios
Vue.prototype.$axios = Axios;

3.傳回資料並處理

最後在需要使用到該JSON資料的vue文件中進行引用

<script>
expert default{
        name:'xxx',
        data(){
            return{

            }
        },
        created(){              
          var that = this;
          //發請求，獲取數據
          //get請求
          this.$axios.get('/api/xxx')
          .then(function(response){
            var dataSource = response.data;
            if(dataSource.code == 0){ //如果回傳值是正確
             //在此處進行資料解析，並設定欲抓取的資料
            }
          })
          .catch(function(error){
            console.log(error);
          });
        } 


}
</script>

可以直接從政府資料開放平台上所開放的資料來進行練習