Vue优雅的使用mock数据

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

1. 初始化你的项目
   话不用啰嗦，首先初始化你的项目，最简单的就是使用vue-cli啦

vue init webpack

2. 引入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

3. 使用mock.js疯狂的mock数据
   在vue文件中

<template>
  <div>
    {{mock}}
  </div>
</template>
<script>
export default {
  data () {
    mock: {}
  },
  mounted () {
    // 这里请去看mockjs文档
    this.mock = this.$mock({
      id: '@id',
      name: '@cname',
      phone: /(135|136|180|185)\d{8}/,
      remark: '负责@county(true)'
    })
  }
}
</script>

4. 小小的总结一下

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