持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

mock的使用前置介绍

现在公司很多项目都是 实行的前后端分离的开发模式 而这个导致的往往是前后端并行开发

如果前端已经开发完了 后端还没有准备好接口 我们这个时候就没有测试办法了么 答案是 no

mock的安装使用

npm i mockjs -D

2.在src文件夹 新建一个 mock文件夹 创建一个文件mock/index.js

import Mock from 'mockjs'
​
Mock.mock('/user',/get|post/i,{
    list:[
        {id:1,name:'jack',age:18},
        {id:2,name:'rose',age:20},
    ]
})

4.main.js中导入mock/index.js文件

import Vue from 'vue'
import App from './App.vue'
+ import './mock'
​
Vue.config.productionTip = false
​
new Vue({
  render: h => h(App),
}).$mount('#app')

5.在App.vue中测试模拟数据

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
​
<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  async created(){
    const res = await axios.get('/user')
    console.log(res);
  }
}
</script>
​
<style>
</style>
​

mock提高 详情查看mockjs.com/

import Mock from 'mockjs'
​
//数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
Mock.mock('/user',/get|post/i,{
    'list|1-10':[
        {
            'id|+1':1,
            'name':/\w{2,4}/,
            'age|1-100':1
        }
    ]
})

好啦，这就是mock的简单使用，长路漫漫，希望能够在前端路上越走越远吧！

送大家一句话，学习前端，顺势而为，学习如逆水行舟，不进则退，特别是前端，固守成章只会被时代淘汰，加油