1 搭建一個vue-cli項目
2 安裝 mockjs 和 mock
npm install mock -S npm install mockjs -S
3 在項目的src文件夾下創建一個名為 mock.js 的文件里面填寫如下代碼：
//引入mockjs
const Mock = require('mockjs')
//使用mockjs模擬數據
Mock.mock('/api/data', (req, res) => {
return {
data: [
{
"id" : 1,
"username": "aaa",
"password": "aaa"
},
{
"id" : 2,
"username": "bbb",
"password": "bbb"
},
{
"id": 3,
"username": "ccc",
"password": "ccc"
}
]
}
})
4 在main.js里引入mock.js文檔內容如下：
require('./mock')
5 安裝axios 和 jQuery 並在hello.vue里成功引用 （不會的搜百度）
6 在hello.vue填寫如下代碼
<template>
<div>
<!-- <router-view></router-view> -->
<ul>
<li v-for="(item,key) in data">{{item}}</li>
</ul>
</div>
</template>
<script>
import $ from 'jquery'
import axios from 'axios'
export default{
data(){
return{
data:[]
}
},
mounted: function(){
this.$axios.get('/api/data').then(res=>{
this.data = res.data;
console.log(data)
})
}
}
</script>
7 npm run dev 啟動項目模擬的數據就會被循環出來了 （后期會加上登錄用戶名密碼判斷）