VUE3（十三）：在main.ts中全局引入axios

在VUE2中，我们可以通过将需要的插件挂载到VUE的主链上（配置成全局属性），然后通过this调用来使用该插件。但是在VUE3的ts中使用这样的配置方法的话是没法通过编译的，这个时候我们就需要拓展属性。下面将介绍如何通过main.ts文件全局引入axios。

VUE3中使用axios库是发送HTTP请求的常见方式。要将axios库全局引入VUE3应用程序，需要在main.ts文件中进行配置。

步骤一：安装axios库

首先，我们需要安装axios库。我们可以使用npm或yarn来安装它。

npm install axios

或

yarn add axios

步骤二：在main.ts中导入axios库

接下来，我们需要在main.ts文件中导入axios库。

import axios from 'axios'

步骤三：创建axios实例

在main.ts文件中，我们需要创建一个axios实例。这个实例将用于发送HTTP请求。

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
})

在上面的代码中，我们创建了一个axios实例并将其命名为axiosInstance。我们还设置了axios实例的baseURL属性，该属性指定了发送HTTP请求时的基本URL。

步骤四：将axios实例挂载到Vue实例上

现在，我们需要将axios实例挂载到Vue实例上。这将使我们能够在整个应用程序中使用axios实例。

app.config.globalProperties.$axios = axiosInstance

在上面的代码中，我们使用了app.config.globalProperties对象将axios实例挂载到Vue实例上。我们还可以使用this.$axios属性来访问axios实例。

步骤五：使用axios实例发送HTTP请求

现在，我们就可以使用axios实例来发送HTTP请求了。

this.$axios.get('/users').then((response) => {
  console.log(response.data)
})

在上面的代码中，我们使用this.$axios.get()方法发送了一个HTTP GET请求。我们还使用.then()方法来处理HTTP请求的响应。

以上就是如何在VUE3的main.ts中全局引入axios库的方法。通过这种方式，我们就可以在整个应用程序中使用axios库来发送HTTP请求了。