扯在前面

最近一直在忙跳槽的事情，博客也好久没有更新了，上次更新还是去年，不出意外的话，从今天起继续今年的博客之旅。

今天继续完善我之前的项目架构，从零开始搭建 vue 移动端项目到上线，有需要的同学可以看下，方便的话，顺便给个 star！

大部分时候，当一个项目开始研发，后台接口开发是没有前端页面开发快的；这就导致一个问题，那就是前端页面都快要写好了，由于接口进度慢，前后端无法联调，如果等到接口开发完了再进行联调，往往又会耗费很长时间；为了解决这个问题，前端可以根据接口文档先在前端模拟数据进行请求，这样当最后接口开发好的时候，直接使用后台真实数据就行了，这样做大大节省了开发时间，可以留更多的时间来进行自测。

本次使用 mock.js 作为 Mock 数据的库，来实现在 vue 项目中使用 mock 数据进行开发的配置。

1、在开发环境中引入 mock.js 以来

npm install mockjs --save-dev

2、新建 mock 文件夹，用于存放 mock 数据，并新建 index.js 和相关部分 mock 数据模板

此处以 user 模块为例，user.js 文件如下

let userInfo = {
  code: 200,
  id: '123456',
  msg: 'success',
  name: 'gs',
  tel: '12306'
}
let user = {userInfo}
export default user

在 index.js 里引入 mock.js 和 user.js

/*
 * @Description: 引入 mock.js 及配置文件
 * @Author: MrGao
 * @LastEditors: Please set LastEditors
 * @Date: 2019-03-12 10:35:08
 * @LastEditTime: 2019-03-12 10:54:20
 */
import Mock from 'mockjs'
import User from './user'
Mock.mock('/root/login/checkMemberLogin', 'post', () => {  // 此处会劫持 /root/login/checkMemberLogin 接口，并返回数据
return User.userInfo  // 返回模拟数据
})

3、在 main.js 中引入 mock 文件夹中的 index.js

if (process.env.MOCK) {    // 判断是否为 mock 模式
  require('./mock/index.js')
}

这里判断当前启动是否为 mock 模式，当启动模式为 npm run dev:mock 的时候引入 index.js，其他情况则不引入 index.js；具体配置可项目代码：https://github.com/MrKaKaluote/vue-mobile

4、测试

此处以登陆接口为例，当进行登陆请求的时候 console.log 结果如下，并且当前 Network 为空

以上就是 mock 数据的过程，当然 mock.js 还有许多配置，具体可以看官方文档；项目详细代码示例点击这里，如果感觉对你有用的话请给个👍。