如何在使用CLI创建新项目后正确导入VUE 3中的Axios？ [英] How to correctly import Axios in vue 3 after creating new project with CLI?

问题描述

我使用以下命令创建了一个新项目：

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)

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

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

那么，我如何正确导入axios？

推荐答案

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

这篇关于如何在使用CLI创建新项目后正确导入VUE 3中的Axios？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！