如何在vue-cli脚手架使用axiox发起请求，并利用mockjs模拟接口数据

本文链接：https://blog.youkuaiyun.com/qq_37201181/article/details/81082172

本文介绍如何通过Axios与MockJS在Vue项目中快速搭建本地模拟接口，包括安装依赖、配置文件结构、编写模拟数据及在组件中调用等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：cmd进入到你的项目目录，安装axios与mockjs

cnpm install axios

cnpm install mockjs

第二步：在src目录下面新建两个文件夹mock与api(这里是放置api地址的地方)在mock文件夹下新建一个文件usermock.js，api文件夹下新建一个Apipath.json文件，下面是我文件夹目录

Apipath.json文件内容

{
    "user":{
        "getUserInfo":"/api/data"
    }
}

usermock.js文件内容

import ApiPath from "../api/Apipath.json"
const Mock = require("mockjs")

Mock.mock(Apipath.user.getUserInfo, "get", {
    "code": 0,
    "data": {
      "fullName": "@CNAME", // 随机生成中文人名
      "userId": 1000234234001,
      "username": "zhangsan"
    },
    "msg": "success"
})

第三步：在main.js文件引用axios与usermock.js

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'; // 导入组件库
import 'iview/dist/styles/iview.css'; // 导入样式
import axios from 'axios'//引用axios
Vue.prototype.$axios=axios;//解决在其他组件无法使用axios命令
Vue.use(iView);
Vue.config.productionTip = false;
require('./mock/usermock.js');//请求usermock.js

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

第四步：利用axios获取usermock.js数据

在需要获取数据的文件中，比如我的就是在index.vue文件中

methods:{
	getdata(){
      var that=this;
      this.$axios.get('/api/data').then(function(res){
        that.data=res.data;
        console.log(res.data);
      })
      .catch(function(){
        console.log('error');
      })
    }
}
mounted() {
    this.getdata();
 },

第五步：查看获取到的数据