在前端開發(fā)前期過程中難免要使用模擬數(shù)據(jù)填充頁面重罪,使頁面完整风宁,內(nèi)容走心腐碱,更加的NICE誊垢。接下來老司機(jī)帶你開車走起
- 初始化你的項目
話不用啰嗦掉弛,首先初始化你的項目,最簡單的就是使用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直接產(chǎn)生mock數(shù)據(jù)
請看這里Vue.prototype
請看這里mockjs
- 使用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: '負(fù)責(zé)@county(true)'
})
}
}
</script>
- 小小的總結(jié)一下
以上數(shù)據(jù)每次生成都是隨機(jī)的,能更加充實你的頁面芋肠,增加原型開發(fā)可看性乎芳,在接口,前端開發(fā)時間不對等的情況下帖池,可以優(yōu)先使用mock進(jìn)行數(shù)據(jù)模擬奈惑,增加充實頁面。
如果睡汹,有使用vuex進(jìn)行數(shù)據(jù)管理肴甸,也可以將mock數(shù)據(jù)引入,有甚者可以修改build中的dev-server囚巴,直接模擬請求內(nèi)容的數(shù)據(jù)模擬雷滋,增加開發(fā)的可靠性。
嗷... 總結(jié)完成