一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--Mock设置
advertisement

使用vue全家桶高仿小米商城--Mock设置

1、开发阶段,为了高效率。需要提前Mock
2、减少代码冗余、灵活插拔
3、减少沟通、减少接口联调时间

Mock设置的3种方案
A、本地创建json

本地项目中创建login.json文件,代码如下图所示:


修改App.vue文件中的代码,如下图所示:


删除、修改main.js里面的代码,如下图所示:

然后在浏览器上面查看请求成功,如图所示:

 
B、easy-mock平台
这种方式就比较简单了,修改两个地方的代码就可以了,如下两图(图一App.vue,图二main.js):



C、集成Mock API
 首先在运行工具里面安装mockjs(npm i mockjs --save-dev),然后修改新增一个文件夹和文件,详情及代码如下图所示:


 然后修改main.js文件夹,代码如下图所示:


然后在浏览器上查看效果(记得要使用vue-devtools看),如下图所示:

zhangren.online
上一篇:使用vue全家桶高仿小米商城--接口环境设置
下一篇:使用vue全家桶高仿小米商城--头部组件公用样式精简(mixin.scss)

您可能喜欢

​vue中非父子组件传值

​vue中非父子组件传值

​vue中ref的使用

​vue中ref的使用

回到顶部