Vue3实战（二）：Vue3+axios+mock 前后端分离开发项目（完整步骤）

vue3中使用axios

axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定，

例如以下写法是vue2引入axios的写法

import Vue from 'vue'
import axios from ‘axios’

Vue.prototype.$http = axios

然而，在vue3.0，并不是直接创建的vue实例，而是通过createApp来创建的

那么问题就来了，这样的话，

一，vue3.0要通过app.config.globalProperties.$axios = axios进行挂载

二，vue-axios

vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装

在mian.js中引用axios，vue-axios，通过全局方法 Vue.use() 使用插件，就相当于调用install方法

//引入axios
import axios from "axios";
import VueAxios from "vue-axios";

const app = createApp(App).use(VueAxios, axios);
app.mount("#app");

即可，后续使用，还是照常用

vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log (response.data)
})
this.$http.get(api).then((response) =>{
console.log( response.data)
})

使用 Vue 的插件写法，更符合 Vue 整体生态环境。直接写原型链，感觉有些粗暴了，搞定

vue3中使用mock

 引入mockjs

npm install -g mockjs

src文件夹下新建mock文件夹，然后新建index.js文件

//     src/mock/index.js

var Mock = require("mockjs");
Mock.mock("/api/users", "post", {
  "users|2-5": [
    {
      "id|+1": 1,
      name: "@cname",
    },
  ],
});

main.js中进行引入

//引入mock
require("./mock");

在组件中配合axios进行使用

组件：

<template>
  <div>
    <button @click="testMock">搜索</button>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "demo",
  props: {},
  components: "",
  setup() {},
  methods: {
    testMock() {
      console.log(this.axios);
      this.axios.post("/api/users").then((res) => {
        //请求成功
        console.log("打印返回参数", res.data);
      });
    },
  },
});
</script>

<style scoped></style>

main.js

import { createApp } from "vue";
import App from "./App.vue";
//引入axios
import axios from "axios";
import VueAxios from "vue-axios";
//引入mock
require("./mock");

const app = createApp(App).use(VueAxios, axios);
app.mount("#app");

参考文章：

　　链接：https://www.cnblogs.com/sinceForever/p/14561570.html