通过一个简单的demo演示如何在vue项目中使用mock
使用vue-cli3开始vue项目
npm install -g @vue/cli
vue create mockdemo
cd mockdemo
npm run serve
安装及使用mock
- 使用npn安装mockjs
npm install mockjs --save
- 在项目src中创建mock文件夹,文件夹中创建index.js
import Mock from 'mockjs'
const Random = Mock.Random
Mock.mock('/data/index', 'get', {
name: Random.name(),
date: Random.date()
})
- 然后再main.js中引入
Vue.config.productionTip = false
require('./mock')
使用axios调用mock接口
首先安装axios
npm install axios --save
然后在App.vue中使用axios调用mock接口
<template>
<div id="app">
{{name}}
{{date}}
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
date: '',
name: ''
}
},
mounted () {
axios.get('/data/index').then(res => {
console.log(res.data)
const { name, date } = res.data
this.date = date
this.name = name
})
}
}
</script>
文章评论