在vue中使用mock

通过一个简单的demo演示如何在vue项目中使用mock

使用vue-cli3开始vue项目

npm install -g @vue/cli
vue create mockdemo
cd mockdemo
npm run serve

安装及使用mock

1. 使用npn安装mockjs

npm install mockjs --save

2. 在项目src中创建mock文件夹，文件夹中创建index.js

import Mock from 'mockjs'
const Random = Mock.Random

Mock.mock('/data/index', 'get', {
  name: Random.name(),
  date: Random.date()
})

3. 然后再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>

mock详细用法访问mock官网
demo项目git地址mockdemo