如何在main.js中使用axios

Question

我正在学习 Vue.js。

我有这段运行良好的代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App).use(store).use(router)

app.mount('#app')

现在我想添加一些导入，例如“axios”。此代码不运行：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

const app = createApp(App).use(store).use(router).use(axios)

app.mount('#app')

错误是：

Uncaught RangeError: Maximum call stack size exceeded

    at merge (utils.js?c532:276)
    at assignValue (utils.js?c532:282)
    at forEach (utils.js?c532:253)
    at merge (utils.js?c532:291)
    at assignValue (utils.js?c532:282)
    at forEach (utils.js?c532:253)
    at merge (utils.js?c532:291)
    at assignValue (utils.js?c532:282)
    at forEach (utils.js?c532:253)
    at merge (utils.js?c532:291)

那么如何在 main.js 文件中添加一些其他“用途”呢？这当然是非常基础的，但我是初学者。

Answer 1

您使用的是 vue 3 并且 axios 不是插件（我们无法像这样注册它app.use()）它是一个 javascript 模块，可以添加到应用程序实例中，例如：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

const app = createApp(App).use(store).use(router)

app.config.globalProperties.axios=axios

app.mount('#app')

并在子组件中引用它，如下所示：

this.axios