Vue3 + Ts 配置axios

在Vue 3和TypeScript项目中配置axios，你需要执行以下步骤：

1. 安装axios库：

npm install axios

2. 创建一个用于配置axios的文件，例如http.ts：

import axios from 'axios';
 
const http = axios.create({
  baseURL: 'http://your-api-url',
  timeout: 1000,
  // 其他配置...
});
 
export default http;

3. 在Vue组件中使用axios：

<template>
  <div>
    <!-- 组件模板内容 -->
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import http from './http'; // 引入配置好的axios实例
 
export default defineComponent({
  name: 'YourComponent',
  setup() {
    // 使用axios实例发起请求
    http.get('/endpoint')
      .then(response => {
        // 处理响应
      })
      .catch(error => {
        // 处理错误
      });
 
    return {
      // 返回响应数据或方法
    };
  },
});
</script>

确保在vue.config.js中正确配置TypeScript支持，如果没有该文件，请创建它，并确保已经启用了对TypeScript的支持：

module.exports = {
  // ...
  configureWebpack: {
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.json']
    }
  }
};

以上步骤和代码展示了如何在Vue 3和TypeScript项目中配置和使用axios。