脚本宝典收集整理的这篇文章主要介绍了

vue-cli结合mockjs模拟后台数据

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

mockjs在vue中使用:

准备工作:
1、安装vue-cli
2、加载模块mockjs、axios(http请求库)
npm install mockjs axios --save

开始:
1、创建mock.js文件(用于定于接口返回的数据)到src目录下的任何一个合适的文件夹下,设置好拦截信息,,设置规则可以看mock官网规则

clipboard.png

2、在mock.js文件中写入以下模拟数据
单条数据:

clipboard.png

多条数据:

clipboard.png

3、在组件中引入axios和mock.js文件

import axios from 'axios';
import mockdata from '../mock/mockjs';
在mounted中:

axios.get('msg').then(res=>{
    // this.data1 = res.data;
    console.log(res);
})

clipboard.png

4、运行项目 npm run dev,查看控制台

clipboard.png

以上,结束
文章结合了多位前辈的经验得出,如果更好的方法,请大家在评论区评论,谢谢!
https://www.cnblogs.com/vicky...
https://www.imooc.com/article...

总结

以上是脚本宝典为你收集整理的

vue-cli结合mockjs模拟后台数据

全部内容,希望文章能够帮你解决

vue-cli结合mockjs模拟后台数据

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过