vue3中使用mock.js

1.先安装axios与mock.js

npm install axios
npm install mockjs

官网地址:Mock.js

2.建立一个axios实例的文件,个人习惯不同,我是建立在src/utils/下.命名为request.js

//axiosInstance.js
//导入axios
import axios from 'axios'

//使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。
const API = axios.create({
	baseUrl:'http://localhost:8080', //请求后端数据的基本地址，自定义
	timeout: 2000                   //请求超时设置，单位ms
})

//导出我们建立的axios实例模块，ES6 export用法
export default API

3.接下来用mock.js配置模拟数据,我在src/mock/中简历了一个index.js的文件

// src/mock/index.js
import Mock from 'mockjs'  //导入mockjs

//使用Mock下面提供的mock方法进行需要模拟数据的封装
//参数1，是需要拦截的完整请求地址，参数2，是请求方式，参数3，是请求的模拟数据

Mock.mock('/getData', 'get', {
    status:200, //请求成功状态码
    dataList:[1,2,3,4,5,6,7,8,9,10] //模拟的请
    })

4.在main.js引入我们的request.js,全局配置一下axios的使用,同时也引入我们的mockjs文件

//main.js
import { createApp } from 'vue'
import App from './App.vue'
//导入mock
import './mock/index'
//axios文件
import axios from './utils/request.js'

const app = createApp(APP);   //建立一个vue3app
app.mount('#app');            //将这个vue3app全局挂载到#app元素上
app.config.globalProperties.$axios=axios;  //配置axios的全局引用

5.所有配置已完成,接下来可以创建个页面写一个请求测试是否成功啦

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="getData()">test axios 请求数据</button>
    <p>这是请求到的数据{{testData.list}}</p>
  </div>
</template>
<script>
import { reactive } from '@vue/reactivity'
import { getCurrentInstance } from "vue";

// import API from "../utils/request"
export default{
    name:'About',
    setup(){
        //数据
        const testData = reactive({
            list:[]
        });
        const { proxy } = getCurrentInstance();
        //测试请求方法
        const getData = function(){
            proxy.$axios({
                url:'/getData',
                method:'get'
            }).then((res)=>{
                alert('请求成功!');
                testData.list = res.data.dataList;
            });
        }
        return{
            testData,
            getData,
        }
    }

}
</script>

end 页面的效果如下,有帮助到的话点个赞再走吧;