Vue优雅的使用mock数据

在前端开发前期过程中难免要使用模拟数据填充页面,使页面完整,内容走心,更加的NICE。接下来老司机带你开车走起

  1. 初始化你的项目
    话不用啰嗦,首先初始化你的项目,最简单的就是使用vue-cli啦
vue init webpack
  1. 引入mock.js
    安装 mockjs
npm install --save-dev mockjs

引入到Vue原型上,方便使用

 import mockjs from 'mockjs'
 Vue.prototype.$mock = Vue.$mock = mockjs.mock

以上引入到Vue原型上,可以使用 this.$mock直接产生mock数据
请看这里Vue.prototype
请看这里mockjs

Vue优雅的使用mock数据_第1张图片
  1. 使用mock.js疯狂的mock数据
    在vue文件中


  1. 小小的总结一下

以上数据每次生成都是随机的,能更加充实你的页面,增加原型开发可看性,在接口,前端开发时间不对等的情况下,可以优先使用mock进行数据模拟,增加充实页面。
如果,有使用vuex进行数据管理,也可以将mock数据引入,有甚者可以修改build中的dev-server,直接模拟请求内容的数据模拟,增加开发的可靠性。
嗷... 总结完成


你可能感兴趣的:(Vue优雅的使用mock数据)