1. 前言
在前端开发中，我们经常需要与后端进行数据交互。但是在开发的过程中，很少有机会能与真实的后端进行交互，特别是在前端开发的初期阶段。这时候，数据模拟和接口Mock就变得尤为重要。Vue.js提供的vue-cli脚手架中，可以很容易地使用Mock.js进行接口模拟。
2. Mock.js介绍
2.1 什么是Mock.js
Mock.js是一个轻量级的前端数据模拟库，可以模拟GET、POST等HTTP请求的响应和数据，用于前后端分离开发中前端进行数据模拟。
2.2 安装Mock.js
在使用Mock.js之前，需要安装它。可以通过npm命令来安装。
npm install mockjs --save-dev
2.3 使用Mock.js
Mock.js主要有以下两种使用方式：
1.使用Mock.js提供的方法，在前端进行数据模拟。
2.在vue-cli中使用Mock.js进行接口Mock。
3. 在vue-cli中使用Mock.js进行接口Mock
3.1 创建vue-cli项目
首先，我们需要创建一个vue-cli项目。在命令行中执行以下命令：
vue init webpack-simple demo
cd demo
npm install
3.2 安装依赖
接着，我们需要安装一些需要用到的依赖包。
npm i --save-dev mockjs
npm i --save-dev webpack-dev-server
npm i --save-dev json-server
其中，webpack-dev-server是用来启动本地开发服务器的，json-server是用来快速创建一个本地RESTful API的工具。
3.3 创建Mock数据文件
在项目目录下创建mock文件夹，用来存放Mock数据文件。在mock文件夹中创建一个test.js文件，并编写Mock数据。
import Mock from 'mockjs'
Mock.mock('http://localhost:8080/api/test', 'get', {
status: 200,
message: 'success',
data: {
'list|10-20': [{
'id|+1': 1,
'name': '@cname',
'age|18-35': 20
}]
}
})
Mock.mock方法的第一个参数是接口地址，第二个参数是HTTP请求方式，第三个参数是响应数据。
代码中，我们模拟了一个名为test的接口。该接口返回一个对象，包含三个字段：status、message和data。其中，status和message是模拟的请求返回状态和信息，data字段是模拟返回的数据，包含一个长度在10-20之间的list数组。
3.4 在main.js中引入Mock数据文件
在src文件夹下的main.js文件中，引入上面创建的Mock数据文件。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import './assets/css/reset.css'
import './assets/css/border.css'
import './assets/css/iconfont.css'
import './assets/js/flexible'
import './mock/test' // 引入mock数据文件
Vue.config.productionTip = false
Vue.prototype.$http = axios
new Vue({
router,
render: h => h(App)
}).$mount('#app')
需要注意的是，在实际项目中，我们可能会有多个Mock数据文件需要引入，这时候可以创建一个mock.js文件，将多个Mock数据文件引入。
3.5 启动本地服务器
在命令行中执行以下命令，启动本地服务器。
json-server --watch mock/db.json --port 3000 // 启动json-server
npm run dev // 启动webpack开发服务器
此时，Mock数据已经准备好了响应请求。
4. 测试Mock数据接口
在src下的App.vue文件中，使用axios进行Mock接口请求。
export default {
name: 'App',
created () {
this.getData()
},
methods: {
getData () {
this.$http({
url: '/api/test',
method: 'get'
}).then(res => {
console.log(res)
})
}
}
}
在浏览器中访问http://localhost:8080，打开开发者工具，可以看到控制台输出的数据。
5. 总结
Mock.js是前端数据模拟的好工具，它可以帮助我们在前端开发的初期阶段，完成数据模拟和接口Mock。在vue-cli中使用Mock.js可以帮助我们快速构建Mock数据，方便进行开发和测试。希望本文对大家有所帮助。