如何在工程化Vue中使用mock模拟后端数据

如何在工程化Vue中使用Mock.js,是前后端分离，测试数据（超详细）@Vue

如何在工程化Vue中使用Mock.js

前言：mockjs官网http://mockjs.com/。
mockjs模拟后台数据，测试前端请求接口，一款非常好用的js插件~~

实例介绍如何使用mockjs

1安装

npm/cnpm install  mockjs --save

上图：

1.2安装完mockjs，还要有axios，或者Vue自带的请求方式（不推荐）

npm/cnpm install axios --save

上图：

2.安装完成后测试数据

2.1 tip：我用的简单模块化的vue项目

$ mock文件夹/componments文件夹均为我后期所建
2.2 测试mock是否可用
在mock文件夹下新建test.js文件，测试如下

输出结果：

$:官网上的例子，语法上介绍，请在官网上看介绍，本篇只介绍怎样使用。
测试成功，下面，我们来看更深一步的使用
2.3mock文件夹下新建一个 mock.js 用于封装数据

Object.assign()方法：
第一个参数作为目标对象，后面参数都是资源对象，将资源对象与目标对象进行合并。

2.4 封装一个入口文件 index.js

可能会有疑问为什么封装这样一个文件？（别急，慢慢看，业务需求~）
2.5 前台Vue组件开发（testList.vue）

这里返回的数据，我并没有做解析，仅仅是一个完成请求动作~
2.6 别忘了在文件入口写入你要引入的插件 X3

$ axios我是在组件中引入的
测试样图：

测试成功~~~

但是每次我们请求后台接口的时候，是不是要返回状态_{？我们进一步开发}

mock文件夹下新建一个message.js用于封装我们的状态码

修改我们的数据包文件如下（List.js）：

测试：

这次数据的模拟是不是更顺眼了呢~~~，至此，完成了mock的测试与使用~~
如果感觉有帮助的话，那就点个赞吧~~
讲的有不对的地方，欢迎留言更正~~~