Vite+Ts 中使用mockjs模拟用户列表数据

在Vite+TypeScript项目中使用Mock.js来模拟用户列表数据的步骤如下：

1. 安装Mock.js：

npm install mockjs --save-dev

2. 在项目中创建一个mock数据的文件，例如mock/user.ts：

import Mock from 'mockjs'
 
const userList = Mock.mock({
  'list|1-10': [
    {
      'id|+1': 1,
      username: '@name',
      'gender|1': ['male', 'female'],
      email: '@email',
      'age|20-30': 0
    }
  ]
})
 
export default userList

3. 创建一个mock服务器的入口文件，例如mock/index.ts：

import Mock from 'mockjs'
import userList from './user'
 
Mock.mock('/api/users', 'get', userList)

4. 在项目启动脚本中启动Mock服务，例如vite.config.ts或main.js（Vue项目中）：

import { setupProdMockServer } from './mock/index'
 
setupProdMockServer()

5. 在你的业务代码中，使用axios或其他HTTP客户端请求模拟的用户列表数据：

import axios from 'axios'
 
axios.get('/api/users').then(response => {
  console.log(response.data.list) // 输出模拟的用户列表数据
})

确保你的请求路径与Mock.js中定义的路径相匹配。当你启动你的Vite开发服务器时，Mock服务器也会随之启动，并处理对应的API请求，返回模拟数据。