Vue3+Mock接口实战全攻略

Vue 3 与 Mock 接口文档的实践指南

现代前端开发中，前后端分离已成为主流模式。Vue 3 作为前端框架，常需要与后端接口交互。在开发初期或协作场景下，使用 Mock 数据模拟接口能极大提升效率。以下从项目配置、Mock 实现到接口文档管理展开说明。

---

项目初始化与依赖安装

创建 Vue 3 项目并安装必要依赖：

npm create vue@latest vue-mock-demo
cd vue-mock-demo
npm install axios mockjs --save-dev

axios 用于网络请求，mockjs 用于生成模拟数据。若需接口文档支持，可额外安装 swagger-ui 或 apidoc。

---

Mock 数据配置

在项目中新建 mock 文件夹，定义模拟接口与数据规则：

// mock/user.js
import Mock from 'mockjs'

Mock.mock('/api/user/list', 'get', {
  'code': 200,
  'data|5-10': [{
    'id': '@id',
    'name': '@cname',
    'age|18-60': 1
  }]
})

在入口文件激活 Mock：

// main.js
import './mock/user'

---

封装请求层

通过 axios 统一管理请求，便于后期切换真实接口：

// src/utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: '/api',
  timeout: 5000
})

service.interceptors.response.use(response => {
  return response.data
})

export default service

组件中调用示例：