VSCode mock数据

1.项目目录下安装mock

//mockjs
npm install mockjs --save-dev
//axios
npm i axios -S

2.mock目录

2.文件内容

（1）index.js:

// 引入mockjs
import Mock from 'mockjs'
// 引入模板函数类
import story from './modules/story'

// Mock函数
const { mock } = Mock

// 设置延时
// Mock.setup({
//   timeout: 400
// })

// 使用拦截规则拦截命中的请求，mock(url, post/get, 返回的数据);
mock('/mock/story', 'get', story.list)

（2）story.js

function list (res) {
  // res是一个请求对象，包含: url, type, body
  return {
    code: 200,
    message: '请求成功',
    data: [{
        "id": 1,
        "name": "tom",
        "age": "13",
        "email": "tom@qq.com"
      },
      {
        "id": 2,
        "name": "andy",
        "age": "18",
        "email": "andy@qq.com"
      },
      {
        "id": 3,
        "name": "rose",
        "age": "26",
        "email": "rose@qq.com"
      }
    ]
  }
}

export default { list }

(3) main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import '@/mock'
// 引入axios
import axios from 'axios'

// 导入并安装 Vant 组件库
import Vant from 'vant'
// 切记：为了能够覆盖默认的 less 变量，这里一定要把后缀名改为 .less
import 'vant/lib/index.less'

// 配置axios到原型链中
Vue.prototype.$http = axios
Vue.use(Vant)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

(4) story.vue

<template>
  <div>
    story
  </div>
</template>

<script>

export default {
  name: 'Story',
  data() {
    return {
      story: []
    }
  },
  component: {
    StoryInfo
  },
  created() {
    this.$http.get('/mock/story').then((res) => {
      console.log(res)
      if (res.data.code === 200) {
        this.story = res.data.data
        console.log(this.story)
      }
    })
  }
}
</script>

<style>

</style>

打印结果：

参考：
https://www.cnblogs.com/ykCoder/p/12176347.html