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

Question

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

vue create hello-world

正在生成一个包含 HelloWorld.vue、app.vue、main.js（等...）文件的新项目。

现在我按照文档安装 Axios Npm vue-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？

Answer 1

您只能导入 axios 并将其定义为 global property :

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

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

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

选项api：

this.axios.get(...)

in Composition api 我建议像这样直接导入它：

import axios from 'axios'

const MyComponent = {
  setup() {
    //use axios here

   .... 
  }
}

或者您使用 vueuse（vue 组合实用程序）中的 useAxios：

import { useAxios } from '@vueuse/integrations/useAxios'
...
 setup() {
   const { data, isFinished } = useAxios('/api/posts')
 }

Answer 2

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

Answer 3

这对我在 VueJS 3 有用。

npm i vue-axios

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

const app = createApp(App);
app.use(VueAxios)
app.use(axios)

app.mount("#app");


this.axios.get(api).then((response) => {
    console.log(response.data)
})

文档link： https://www.npmjs.com/package/vue-axios

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

How to correctly import Axios in vue 3 after creating new project with CLI?

javascript

vue.js

axios

vuejs3