Vue3运行npm install axios --save命令时npm会丢失

可能是因为你使用了npm 7.x版本，在这个版本中，npm会自动删除package-lock.json或者yarn.lock文件，这可能会导致一些依赖的丢失。你可以尝试升级到npm 7.x以上的版本，或者将npm降级到6.x版本，或者使用yarn来安装axios。如果还是存在问题，请尝试手动安装axios并检查你的依赖项是否正确安装。

相关问题

npm i axios vue-axios

npm i axios vue-axios 是一个命令，用于安装 axios 和 vue-axios 这两个包。这样做的目的是为了在你的 Vue 项目中使用 axios。

在你的 main.js 文件中，你需要导入 axios 和 vue-axios，并将它们与 Vue 实例绑定。可以使用以下代码实现这一点：

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

const app = createApp(App)
app.use(VueAxios, axios).use(router)
app.provide('axios', app.config.globalProperties.axios)
app.mount('#app')

这样就可以在整个项目中使用全局的 axios 对象了。

在组件中，你可以通过注入（inject）的方式来使用全局的 axios。例如，在一个按钮的点击事件中，你可以使用以下代码来发送 GET 请求：

<button @click="getList">getList</button>

<script setup>
import { onMounted } from "vue";
import { inject } from "vue";

const axios = inject("axios");

function getList() {
axios.get("http://x.xxx.xx.xxx:3000/getHottestArticle").then((res) => {
console.log(res);
});
}
</script>

这样，当点击按钮时，会调用 getList 函数，并使用全局的 axios 对象发送 GET 请求。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3 中使用 “vue-axios](https://blog.csdn.net/qq_52697994/article/details/120210534)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

npm安装vue-axios

要安装vue-axios，您可以使用npm或yarn。在命令行中运行以下命令来安装vue-axios-interceptors：

npm install vue-axios-interceptors --save

或

yarn add vue-axios-interceptors

请确保在引入vue之后导入此包。在main.js文件中引入axios并将其设置为Vue的原型属性，然后将axios传递给Vue实例中的axios选项：

import axios from 'axios'
Vue.prototype.axios = axios;
new Vue({
  axios,
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这样，您就可以在整个Vue应用程序中使用axios了。希望对您有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue-axios-interceptors：全局捕获和处理ajax响应](https://download.csdn.net/download/weixin_42097557/14984413)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [vue-axios的安装及四个常见方法](https://blog.csdn.net/Rich_lady/article/details/125082024)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [Vue开发实例（13）之axios和mockjs的安装与使用](https://blog.csdn.net/dkm123456/article/details/124444369)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]