如何在使用CLI创建新项目后正确导入vue 3中的Axios？
如何在使用CLI创建新项目后正确导入vue 3中的Axios？
提问于 2020-10-08 19:43:18
我创建了一个新项目，使用：
vue create hello-world生成一个包含HelloWorld.vue、app.vue、main.js (等)的新项目文件。
现在，我按照docs 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呢？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-10-09 03:52:34
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')Stack Overflow用户
发布于 2020-10-08 20:19:27
您只能导入axios并将其定义为全局属性：
使用bundler的 (vue cli，vite或webpack .)：
import { createApp } from 'vue'
import axios from 'axios'
const app = createApp(...)
app.config.globalProperties.axios=axios然后在任何子组件中使用它，如：
Option ：
this.axios.get(...)在组合api中，我建议直接导入它，例如：
import axios from 'axios'
const MyComponent = {
setup() {
//use axios here
....
}
}或者使用来自useAxios的vueuse (vue组合实用程序)：
import { useAxios } from '@vueuse/integrations/useAxios'
...
setup() {
const { data, isFinished } = useAxios('/api/posts')
}Stack Overflow用户
发布于 2022-06-02 07:37:11
这在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)
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64269587
复制相关文章
相似问题
腾讯云开发者
