vue3 ts vite mockjs

### Vue3 + TypeScript + Vite 集成 Mock.js 数据模拟配置教程 #### 一、环境搭建 为了实现 Vue3 + TypeScript + Vite 的项目并集成 Mock.js 进行数据模拟，首先需要创建一个基础的项目结构。 可以通过以下命令快速创建 Vue3 + TypeScript + Vite 项目[^1]: ```bash npm create vite@latest example-vite-plugin-mock --template vue-ts cd example-vite-plugin-mock npm install ``` #### 二、安装依赖 在项目中引入 `vite-plugin-mock` 和 `mockjs` 及其类型定义文件作为开发依赖。执行如下命令完成安装： ```bash npm install vite-plugin-mock mockjs @types/mockjs -D ``` 同时还需要安装用于发起 HTTP 请求的库 `axios` 或其他类似的工具： ```bash npm install axios ``` #### 三、配置 `vite.config.ts` 编辑项目的 `vite.config.ts` 文件，在其中引入 `vite-plugin-mock` 插件，并将其添加到插件列表中。以下是完整的配置示例： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { viteMockServe } from 'vite-plugin-mock' export default defineConfig(({ command }) => { return { plugins: [ vue(), viteMockServe({ localEnabled: command === 'serve', // 开发模式下启用 Mock 数据 }), ], } }) ``` 此部分代码的作用是在开发环境中自动加载本地的 Mock 数据服务[^2]。 #### 四、创建 Mock 数据目录 在 `src` 目录下新建名为 `mock` 的文件夹，用来存放所有的 Mock 数据脚本。例如可以在该目录下新增一个 `User.ts` 文件来定义用户相关的接口响应数据[^4]: ```typescript // src/mock/User.ts import Mock from 'mockjs'; const Random = Mock.Random; Mock.mock('/rbacapi/permission/getById/:id', (req: any) => { const id = req.url.split('/')[3]; return { code: 0, data: { id: Number(id), name: Random.cname(), // 使用随机中文名 role: Random.pick(['管理员', '普通用户']), }, message: '成功', }; }); ``` 这段代码实现了当访问路径 `/rbacapi/permission/getById/{id}` 时返回一条带有指定 ID 用户的信息[^4]。 #### 五、页面调用 Mock 接口 最后一步就是在组件内部测试这些已经设置好的 Mock API 是否能够正常工作。下面是一个简单的按钮点击触发 GET 请求的例子[^4]: ```html <template> <hello world</h><br /> 人都是会遗忘的，但这也忘记得太过迅速彻底。<br /><el-button @click="fetchData" plain>获取数据</el-button> </template> <script setup lang="ts"> import axios from 'axios'; function fetchData() { axios.get('/rbacapi/permission/getById/3').then((res) => { console.log('接收到的数据:', res.data); }); } </script> ``` 以上模板展示了如何通过点击事件向服务器发出请求以及处理回调中的逻辑[^4]。 --- ###