Vue CLI与Mock.js的完美结合

Vue CLI是一个基于Vue.js进行快速开发的脚手架工具，它集成了一系列的开发工具和配置，可以帮助我们快速搭建和开发Vue项目。

在Vue CLI中使用Mock.js可以模拟后端接口数据，方便前端开发和调试。Mock.js是一个模拟数据生成器，可以根据定义的规则生成随机的模拟数据。

使用Mock.js可以有以下几个步骤：

1. 安装Mock.js

在项目中安装Mock.js可以使用npm或者yarn命令进行安装：

```

npm install mockjs --save-dev

```

或者

```

yarn add mockjs --dev

```

2. 创建一个mock文件夹

在src目录下创建一个mock文件夹，用来存放模拟数据的文件。

3. 创建一个mock数据文件

在mock文件夹下创建一个.js文件，用来定义模拟数据的规则和接口。

4. 编写模拟数据规则

在.js文件中使用Mock.js的语法编写模拟数据规则。例如，可以定义一个接口返回一个数组：

```javascript

import Mock from '// 导入Mock.js

import Mock from 'mockjs';

// 定义模拟数据规则

Mock.mock('/api/list', 'get', {

'data|10': [{

'id|+1': 1,

'name': '@cname',

'age|18-60': 1

}]

});

```

5. 启用Mock.js

在项目的入口文件（一般是main.js）中引入Mock.js并启用：

```javascript

import Mock from 'mockjs';

import './mock'; // 引入mock数据文件

Mock.setup({

timeout: '200-600' // 设置响应时间范围

});

```

6. 测试接口

在项目中使用axios或者其他HTTP库发送请求，可以得到模拟数据：

```javascript

import axios from 'axios';

axios.get('/api/list').then(response => {

console.log(response.data);

});

```

以上就是使用Vue CLI和Mock.js进行模拟数据的基本步骤。通过Mock.js，我们可以方便地模拟后端接口数据，加快前端开发和调试的效率。