vue项目中如何mock数据？

参考官网mockjs.com/0.1/

第一步：安装axios和mock.js(使用axios发送ajax请求，mock.js模拟数据)

npm install mockjs --save
npm install axios --save

第二步：在接口文件(即要请求的模拟数据接口)引入Mock

新建一个文件夹mock用于存放接口文件。由于这里模拟的数据是新闻列表数据，所以在mock下创建newsData.js接口文件并在newsData.js中书写需要模拟的接口及返回结构

//newsData.js
// 1.引入mock模块
const Mock = require('mockjs');
// 2.获取 mock.Random 对象
const Random = Mock.Random;
// 3.生成20条新闻列表数据(包括新闻标题title、作者名author_name、创建时间date)
const produceNewsData = function() {
    let articles = [];
    for (let i = 0; i < 20; i++) {
        let newArticleObject = {
            title: Random.csentence(5, 30), //  Random.csentence( min, max )随机产生一个中文标题，长度默认在5-30之间
            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        }
        articles.push(newArticleObject)
    }
    return articles
}
// 4.定义路由
// 当你使用post方法访问/newsData时，服务器会返回produceNewsData
Mock.mock('/newsData', 'post', produceNewsData);

第三步： 导出到main.js

//main.js
import Vue from 'vue'
import App from './App'
require('@/mock/newsData.js')

第四步： 在指定文件（这里在App.vue）里我们来发送post请求获取数据中使用url为 mock对应的地址 就会返回响应mock数据

// App.vue
import axios from 'axios'
export default {
  name: 'App',
  created(){
    axios.post('/newsData').then(res => { // url即在newsData.js中定义的
      console.log(res) // 打印响应数据
    })
  }
}