mockjs

参考： https://blog.csdn.net/Mme061300/article/details/130343270

1. 入门：vue引入mockjs

1. vue3引入mockjs

   npm install mockjs --save-dev
   

2. 在项目中创建一个mock数据文件，例如mockjs/data.js`：

   // mock/data.js
   import Mock from 'mockjs'
    
   const User = Mock.mock({
     'items|30': [{
       id: '@id',
       name: '@name',
       'age|18-30': 1
     }]
   })
    
   export default User
   

3. 创建一个mock服务器文件，例如mockjs/index.js：

   // mock/index.js
   import Mock from 'mockjs'
   import User from './data.js'
    
   Mock.mock('/api/users', 'get', User.items)
   

4. 在main.js中引入mock服务器文件，启动Mock服务：

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   import store from './store'
   
   import './mockjs/index'
   
   const app = createApp(App)
   app.use(store)
   app.use(router)
   app.mount('#app')
   

5. 在组件中发送请求获取模拟数据：

   // 任意组件内
   import axios from 'axios'
    
   export default {
     async mounted() {
       try {
         const response = await axios.get('/api/users')
         console.log(response.data) // 输出模拟的数据
       } catch (error) {
         console.error(error)
       }
     }
   }
   

确保你的开发服务器配置可以代理到Mock服务器，这样你就可以在开发过程中使用Mock.js提供的模拟数据了。