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

Question

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

vue create hello-world

生成一个包含 HelloWorld.vue 的新项目, app.vue , main.js (等...)文件。
现在我按照文档 Npm vue-axios 安装 Axios :

npm install --save axios vue-axios

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

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

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

const app = Vue.createApp(...)
app.use(VueAxios, axios)

但是方式 app在 Vue 3 中创建是不同的。我认为这就是问题所在:

createApp(App).mount('#app')

那么，如何正确导入 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')

demo