vue中怎么用mock模拟数据

在vue中使用mock模拟数据需要以下步骤：

安装mockjs

npm install mockjs --save-dev

创建mock数据

在项目中创建一个mock目录，然后在该目录下新建一个mock.js文件，编写mock数据：

import Mock from 'mockjs'

// 模拟数据
const data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1,
    'email': '@EMAIL'
  }]
})

// 输出mock数据
console.log(JSON.stringify(data, null, 2))

// 暴露数据
export default data

引入mock数据

在需要使用mock数据的组件中引入mock数据：

import data from '@/mock/mock.js'

使mock数据生效

在main.js文件中使用以下代码使mock数据生效：

import Mock from 'mockjs'
import data from '@/mock/mock.js'

// 拦截ajax请求，配置mock数据
Mock.mock('/api/data', 'get', () => {
  return {
    code: 200,
    data: data.list
  }
})

这样，当调用接口/api/data时，就会返回mock数据。