開發項目的時候，如果后端接口沒有出來，前端工程師也不必非得等接口出來才進行下步開發。可以使用mock.js來模擬接口數據，以下就是使用vue3設置hook函數來封裝axios請求，配合mock.js來實現的代碼，mock的官網?Mock.js
?一.mockjs安裝
npm install mockjs --save
二.在src下 創建mock\index.js 配置文件
import Mock from 'mockjs'// 設置一下模擬返回數據時間
Mock.setup({timeout: '200-600'
})// 方式一:無參數
Mock.mock("/user/userinfo",'get',(req) => {console.log(req);return {msg: '請求成功',code: 0,data: [{meta: {title: '系統',icon: 'ri:pages-line',defaultOpened: true,breadcrumb: true,permanent: false,sidebar: true,},children: [{path: '/systemAuth',component: 'Layout',redirect: '/systemAuthDept',name: 'systemAuth',meta: {title: '權限管理',icon: 'ri:function-line',defaultOpened: true},}]}]}}
)// 方式二:有參數
Mock.mock(/\/account.*/,'get',(req) => {console.log(req);return {username: 'abc',type: '123'}}
)三.在main.js中進行引入
import { createApp } from 'vue'
import App from './App.vue'// 如果不想用mock測試就把這行代碼注釋掉
import './mock/index.js'const app = createApp(App)
app.mount('#app')
四.頁面使用
import { onMounted } from 'vue'
import axios from 'axios'
onMounted(() => {axios.get('/user/userinfo').then(res => {console.log(res, '返回數據 ')})axios.get('/account?username=張三&password=12345678').then(res => {console.log(res, '返回數據 ')})})
