使用 CLI 创建新项目后，如何在 vue 3 中正确导入 Axios？

Question

我使用以下方法创建了一个新项目：

vue create hello-world

生成一个包含HelloWorld.vue, app.vue, main.js(etc ...) 文件的新项目。

现在我按照文档Npm vue-axios安装 Axios ：

npm install --save axios vue-axios

我在main.js文件中导入 Axios ：

vue create hello-world

现在我遇到了一个我不明白的问题。VueAxios 文档说你只需像这样使用它：

npm install --save axios vue-axios

但是app在 Vue 3 中创建的方式是不同的。我认为这是问题的来源：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

那么，如何正确导入axios？

Answer 1

createApp(App).mount('#app') 实际上等同于：

import Vue from 'vue'
const app = Vue.createApp(App)
app.mount('#app')

// or
import { createApp } from 'vue'
const app = createApp(App)
app.mount('#app')

因此，按照 Vue Axios 的文档，只需插入以下行app.use()：

import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(VueAxios, axios) // 
app.mount('#app')

你也可以像这样链接它：

createApp(App).use(VueAxios, axios).mount('#app')

演示

Answer 2

您只能导入axios并定义为全局属性：

使用打包器（vue cli、vite 或 webpack ...）：

import { createApp } from 'vue'
import axios from 'axios'
const app = createApp(...)
app.config.globalProperties.axios=axios

然后在任何子组件中使用它，例如：

选项 API：

this.axios.get(...)

组成api：

import { getCurrentInstance } from 'vue'

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance()

    const axios =internalInstance.appContext.config.globalProperties.axios;

   .... 
  }
}