1.在專案根目錄建立一個data.json

{ 
	"personnel": 
		[  
	        { "id":1, "name": "張三", "sex": "男" },   
	        { "id":2, "name": "王五", "sex": "男" },   
	        { "id":3, "name": "小麗", "sex": "女" },   
	        { "id":4, "name": "小莉", "sex": "女" }   
	   	]  
} 

2.在專案目錄的build目錄下，找到webpack.dev.conf進行修改

const
 
 express = require('express') 
const app = express()//請求server
var appData = require('../data.json')//載入本地資料檔案
var personnel = appData.personnel;//獲取對應的本地資料
var apiRoutes = express.Router() ;
app.use('/api', apiRoutes)//通過路由請求資料

然後在webpack.dev.conf中找到devServer:{}加上before()方法

before(app) {
      app.get('/api/personnel'
 
, (req, res) => {
        res.json({
          data: personnel
        })//介面返回json資料，上面配置的資料personnel就賦值給data請求後呼叫
      })
    }

3.用vue-resource向伺服器請求資料 安裝之後在main.js引入vue-resource 4.App.vue

<template>
  	<div id="app">
		<div class="panel panel-primary">
			<div class="panel-heading"
 
>
				<h3 class="panel-title">員工列表</h3>
			</div>
			<div class="panel-body form-inline">				
				<label>
					Name: 
					<input type="text" name="" class="form-control">
				</label>
				<input type="button" name="" value="新增" class="btn btn-primary" @click="add">
				
			</div>
		</div>
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>Sex</th>
					<th>Operation</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in list " :key="item.id">
					<td>{{ item.id }}</td>
					<td>{{ item.name }}</td>
					<td>{{ item.sex}}</td> 
					<td><a href="">刪除</a></td>
				</tr>
			</tbody>
		</table>
	</div>
  
</template>

<script>
export default {
	name: 'App',
	data: function () {
    		return {
			list:[]
    		}
  	},
  	created () {//當vm例項的data和methods初始化完畢後，vm例項會自動執行created這個生命週期
		this.getAllList ();
	},
	methods: {
		add () {},
		getAllList () {//獲取所有的車品牌列表
			//分析
			//直接this.$http來發起資料請求
			//根據介面API文件，獲取列表的時候，應該發起一個get請求
			//$this.$http.get('url').then(function(result){})
			//當通過then指定回撥函式之後，在回撥函式中，可以拿到資料伺服器返回的result
			this.$http.get('/api/personnel').then( (result)=> {
				// 通過$http獲取到的資料，都在
				this.list = result.body.data	
			})

		}
	}
  
}
</script>

記得重新 npm run dev