vue 搭建mock.js

在Vue项目中搭建Mock.js可以模拟后端API的返回数据，以便在开发过程中进行前端数据的模拟和测试。以下是搭建Mock.js的步骤：

1. 首先，安装Mock.js。在Vue项目的根目录下打开终端，执行以下命令：

npm install mockjs --save-dev

2. 创建一个mock文件夹，在该文件夹下创建一个mock.js文件。在mock.js文件中编写模拟的数据，例如：

import Mock from 'mockjs';

// 模拟GET请求
Mock.mock('/api/getData', 'get', {
  'list|5': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 0
  }]
});

// 模拟POST请求
Mock.mock('/api/postData', 'post', {
  'result': true,
  'message': 'success'
});

3. 在main.js或者其他入口文件中引入mock.js，并启用Mock.js拦截Ajax请求：

import './mock/mock';

4. 使用axios或其他网络请求库发起请求时，请求的URL与mock.js中定义的URL相对应即可。例如，在Vue组件中使用axios进行数据请求：

import axios from 'axios';

axios.get('/api/getData').then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

axios.post('/api/postData', { data: 'mock data' }).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});

通过以上步骤，你就可以在Vue项目中搭建Mock.js来模拟接口数据了。请注意，mock数据仅用于前端开发和测试阶段，不要在生产环境中使用。