// 使用 Mock
var Mock = require('mockjs')

/**
 * 
 * 数据模板
 * 属性名|生成规则: 属性值
 */
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1,
        'name': '@FIRST'
    }]
})

// 输出结果
console.log(JSON.stringify(data, null, 4))

{
    "list": [
        {
            "id": 1,
            "name": "Larry"
        },
        {
            "id": 2,
            "name": "Edward"
        },
        {
            "id": 3,
            "name": "Jessica"
        },
        {
            "id": 4,
            "name": "William"
        },
        {
            "id": 5,
            "name": "Christopher"
        },
        {
            "id": 6,
            "name": "Michael"
        },
        {
            "id": 7,
            "name": "Susan"
        },
        {
            "id": 8,
            "name": "Shirley"
        },
        {
            "id": 9,
            "name": "Angela"
        },
        {
            "id": 10,
            "name": "George"
        }
    ]
}

<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

<div id="app">
  <span>{{info.name}}</span>
  <span>{{info.age}}</span>
  <span>{{info.date}}</span>
</div>

<script>
  // 生成数据
  Mock.mock("http://mockjs", {
    name: "@cname", //模拟名称
    "age|1-100": 100, //模拟年龄(1-100)
    date: "@date('yyyy-MM-dd')", //模拟时间
  });

  const app = new Vue({
    el: "#app",
    data: () => {
      return {
        info: {},
      };
    },

    // http请求拦截
    methods: {
      async getData() {
        const res = await axios.get("http://mockjs");
        this.info = res.data;
      },
    },

    created() {
      this.getData();
    },
  });
</script>