在前端开发前期过程中难免要使用模拟数据填充页面，使页面完整，内容走心，更加的NICE。接下来老司机带你开车走起
- 初始化你的项目
话不用啰嗦，首先初始化你的项目，最简单的就是使用vue-cli啦
vue init webpack
- 引入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
- 使用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>
- 小小的总结一下
以上数据每次生成都是随机的，能更加充实你的页面，增加原型开发可看性，在接口，前端开发时间不对等的情况下，可以优先使用mock进行数据模拟，增加充实页面。
如果，有使用vuex进行数据管理，也可以将mock数据引入，有甚者可以修改build中的dev-server，直接模拟请求内容的数据模拟，增加开发的可靠性。
嗷... 总结完成
