vue@3-cli使用mock.js模拟数据.........

第一步：项目路径下执行命令： npm install mock

第二步：main.js统计目录简历mock文件夹 mock.js


const Mock = require('mockjs')   //随机获取数据
Mock.mock('/api/users', (req, res) =>{ {
        return Mock.mock({
        "user|1-10": [{
                'name': '@cname',
                'id|+1': 1, 
                'age|10-60': 0,    //10-60以内的随机数，0用来确定类型 
                'birthday': '@date("yyyy-MM-dd")',    //年月日
                'city': '@city(true)'    //中国城市
            }]
        })
 }})

第三步：main.js引入

import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router/index.js'
import store from '@/store/store.js'
import "./static/bootstrap/dist/css/bootstrap.css";
// 引入Echarts
import echarts from 'echarts' //引入echarts
import iView from 'iview';
import axios from 'axios'
import 'iview/dist/styles/iview.css';    // 使用 CSS
import './plugins/iview.js'
require('./mock/mock.js')
Vue.use(iView);
Vue.prototype.$echarts = echarts //引入组件
Vue.prototype.$axios = axios
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第四步： vue文件中调用
mounted(){
            this.$axios.get('/api/users').then(res=>{
                console.log(res)
            })
     
},

附上效果
0: {name: "何强", id: 1, age: 15, birthday: "2013-04-09", city: "四川省 资阳市"}
1: {name: "汤军", id: 2, age: 36, birthday: "1988-01-26", city: "海南省 三亚市"}
2: {name: "谭娟", id: 3, age: 22, birthday: "2013-10-25", city: "吉林省 白山市"}
3: {name: "杜秀英", id: 4, age: 55, birthday: "1973-06-16", city: "青海省 海北藏族自治州"}
4: {name: "黎霞", id: 5, age: 35, birthday: "2008-03-23", city: "海外 海外"}
5: {name: "金磊", id: 6, age: 35, birthday: "1971-12-05", city: "四川省 阿坝藏族羌族自治州"}