创建一个Vue3+Vite+axios项目

首先确定电脑里有下载并安装Node.js 

在vscode中打开一个空文件夹，并在终端打开这个文件夹 （点击终端，创建新终端）

 在终端中输入 npm init vite

 这是运行后的   在中间我们需先输入y确定，然后对这个文件命名 ，选择Vue和JS，之后我们就运行它提示的 Done，Now run：下面的命令就可以啦，要按顺序。

cd vite-project 进入你刚创建好的文件（这个一定要注意！有时候终端显示在上一级目录下运行项目会报错！！！）

npm install 导入依赖项

npm run dev 运行文件

之后我们会看见一个界面，上面有Vue+Vite的标志

这时候我们这个项目就创建成功了 ，接下来要在项目中导入axios并使用

如果现在在运行这个项目的话我们 ctrl+D可以退出

然后npm install axios

接下来我们需要在项目中使用 axios，一般我们需要多次使用axios调用接口，所以我建议将它封装成一个方法。

所以在src目录下创建一个axios文件，并在这个文件里创建一个axios.js  (命名随意，知道是啥就行)

//导入 axios
import axios from 'axios'
//创建一个axios方法
const ApI = axios.create({
    baseURL: 'http://localhost:5173', //请求的基本地址
    timeout: 2000 //超时设置
})

export default ApI;

导入了axios 然后创建了个ApI方法 然后baseURL设置请求基本地址，这样当我们请求不同ip地址时比较方便修改。

之后我们在main.js中全局使用axios

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import axios from '../src/axios/axios.js'
import './mock'
const app = createApp(App)
app.mount('#app')
app.config.globalProperties.$axios = axios;

接下来我们就可以使用啦

<template>
  <button @click="getData()">请求</button>
  <p>数据为： {{ Data.list }}</p>
</template>
<script>
import { reactive, defineComponent } from "vue";
import API from "../axios/axios";
export default defineComponent({
  setup() {
    const Data = reactive({
      list: [],
    });
//页面打开时候默认请求
    API({
//在基础路径上增加的路径
      url: "/test2",
//请求方式
      method: "get",
    }).then((res) => {
//请求结果
      Data.list = res.data.dataList;
      console.log(res);
    });
  //调用getData方法时请求
    const getData = function () {
      API({
        url: "/test",
        method: "get",
      }).then((res) => {
        Data.list = res.data.dataList;
        console.log(res);
      });
    };
    return {
      Data,
      getData,
    };
  },
});
</script>

如果要使用axios方法我们直接在页面中导入Api方法并使用就可以啦