Mock的安装和使用（图文）

Mock的安装和使用

第一步：输入指令

cnpm install mockjs -D // windows
 sudo cnpm install mockjs -D // mac

第二步：新建文件夹mock，并在里面新建index。js，并写入内容

import Mock from 'mockjs'
Mock.mock(
  'http://121.31.30:aa/get',
  'get',
  {'array|10': [{'name': '@cname', 'date': '@datetime'}]}
)

// 注意大小写
// 注意第一个参数是地址，第二个参数是方法，第三个参数传值
// 后面Mock.mock是mock假数据，在官网就可以查看到，注意格式不要出错，包括空格，不然就会报错

第三步：main.js里写入

import './mock'

第四步：使用

布局

<ul>
  <li v-for="(item, index) in list" :key="index">
    <span>{{item.name}}</span>
    <span>{{item.date}}</span>
  </li>
</ul>

data定义一个list空数组

data () {
  return {
    list: []
  }
},

通过axios调用出来//这里是axios配置项baseUrl写在了外部
axios配置项baseUrl写在外部

created () {
  this.$server.get('get').then((res) => {
    this.list = (res.data.array)
  })
}

效果如下