mock是一个模拟数据生成器，旨在帮助前端独立于后端进行开发。使前端不用去调用后端的接口，即可完成前端单元测试。
当一个项目开始开发，正常情况是前后台开发同时进行，但是很多情况是后台先提供接口，然后前端才开始编写页面，这样就会导致项目进度缓慢，为了解决这个问题，前端一般是根据接口先在本地进行数据模拟请求，本次我们使用Mockjs，实现在基于Vue3项目的数据模拟。
1.安装Mockjs
Mockjs提供npm包，所以安装比较方便
yarn add mockjs2.配置Mock
我们配置方法可以按照官方提供的，写的比较详细，这里我们稍微加点自己的方法，方便我们在添加mock模块的时候更加方便。
配置统一入口
在src文件夹下新建mock文件夹，文件夹中新建index.js，这个js文件作为统一入口文件，之后添加的所有的Mock数据都经过这个文件解析后，统一注册。
index.js文件内容如下：
/** * Mock配置文件 **/// 首先引入Mockconst Mock = require('mockjs');// 设置拦截ajax请求的相应时间Mock.setup({ timeout: '200-600'});let configArray = [];// 使用webpack的require.context()遍历所有Mock文件const files = require.context('.', true, /\.js$/);files.keys().forEach((key) => { if (key === './index.js') return; configArray = configArray.concat(files(key).default);});// 注册所有的Mock服务configArray.forEach((item) => { for (let [path, target] of Object.entries(item)) { let protocol = path.split('|'); Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target); }});main.js中导入
import { createApp } from "vue";import App from "./App.vue";import router from "./router";import store from "./store";// 导入mockrequire('./mock');createApp(App) .use(store) .use(router) .mount("#app");
3.编写模拟数据接口
编写请求数据方法
比如我们有个登录接口，一般我们会在src文件夹下新建api文件夹，里面定义我们所有的请求接口方法，这里，我们也不例外，src/api/basis/下新建login.js，内容如下：
import { liSend } from '@/utils/request'// 测试请求export const login = (obj) => { return liSend("post", "login", obj) };这里面我们只关注，请求方式是post，url是login。
编写mock返回数据方法
src/mock/basis/下新建login.js，内容如下：
/****************** * 基础 - 登录 - mock *****************/// 登录let Login = { "code": 0, "msg": "success", "data": {}}export default { /** * 基础 - 登录 * @param： {} * @returns：Promise {<pending>} **/ 'post|login': option => { return Login }}4.调用mock数据
新建组件
新建组件，组件内调用login方法，返回数据。
<template> <div>请求数据：{{ state.loginMsg }}</div> <button @click="loginBtn">获取mock数据</button></template><script>import { reactive, provide } from "vue";import { login as loginDemo } from "@/api/basis/login";export default { setup(props, context) { const state = reactive({ loginMsg: {} }); const loginBtn = () => { loginDemo().then(res => { state.loginMsg = res; }); }; return { loginBtn, state }; }};</script>预览效果
