在前端開發(fā)前期過程中難免要使用模擬數(shù)據(jù)填充頁面，使頁面完整，內(nèi)容走心，更加的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直接產(chǎn)生mock數(shù)據(jù)
請看這里Vue.prototype
請看這里mockjs

3. 使用mock.js瘋狂的mock數(shù)據(jù)
   在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. 小小的總結(jié)一下

以上數(shù)據(jù)每次生成都是隨機的，能更加充實你的頁面，增加原型開發(fā)可看性，在接口，前端開發(fā)時間不對等的情況下，可以優(yōu)先使用mock進行數(shù)據(jù)模擬，增加充實頁面。
如果，有使用vuex進行數(shù)據(jù)管理，也可以將mock數(shù)據(jù)引入，有甚者可以修改build中的dev-server，直接模擬請求內(nèi)容的數(shù)據(jù)模擬，增加開發(fā)的可靠性。
嗷... 總結(jié)完成