VueCli3.0中集成MockApi的方法示例

一：使用场景

哎哟，好烦啊，这个需求还么结束就来下一个需求，程序员不要排期的吗？

没办法啊，资本主义的XX嘴脸啊

来吧，技术评审我俩把接口格式对一把，你先开发，我这边结束了我跟上，再联调

MMP，那又增加了我的工作量啊，每次我都要自己先把数据放在一个配置文件中，引入使用，然后对接的
时候还得删除无用代码，好气

你自己Mock接口啊，就向我们后端经常用PostMan一样模拟请求啊

Mock？？我去查查看

二：Mock的概念

1：Mock的描述

Mock接口其实就是模拟真实接口提供一个在开发环境的假数据，甚至是真实数据，在开发时，经常出现
接口内容不能够及时的跟进，导致开发过程中添加一些额外的工作量。接下来的例子全部围绕着Vue为主体介绍
前后端提前确定好通信的JSON格式之后，我们在不依赖后端进度的同时，能提供一套好的开发体验。

2：Mock能解决的问题

减少额外工作，在没有Mock接口的时候我们模拟数据的方式很烦躁，比如list列表，需要在data中声明list，去调试内容，或者引入一个mock文件，这样做导致在联调调用接口的部分代码没有写，联调成功的时候要删除很多无用代码 ---> 通过Mock只需在联调的时候把Mock接口的地址换成真实地址即可

import { mockList2 } from 'mock/list.js';export default { data () {  return {   mockList: [    {     "name": 'tx',     "age": 12    }   ],   mockList2  } }}

如果采用上述的方式去模拟数据，缺少真正缺口所具备的状态，比如删除接口，有成功和失败的区分，这个模拟就很恶心了 ----> 通过Mock，可以直接通过实在的query或者其他的操作来达到同样的目的

3：Mock的几种方式以及对应的优缺点

4：本地Mock接口

该篇文章针对本地Mock接口进行操作，其他的方式会简要介绍并给出对应的链接，如果有需要，自行去查阅。