vue-cli 引入axios

最新推荐文章于 2025-09-30 14:52:20 发布

原创最新推荐文章于 2025-09-30 14:52:20 发布 · 1.6w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-cli #axios

vue2.x 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何使用npm安装Axios库，并将其集成到Vue项目中。通过修改原型链，使得Axios可以在各个组件中作为Vue原型属性直接调用。此外，还提供了具体的组件内请求示例。

一、npm 安装axios，文件根目录下安装，指令如下

 npm install axios

二、修改原型链，在main.js中引入axios

import axios from 'axios'

接着将axios改写为Vue的原型属性，

Vue.prototype.$http=axios

这样之后就可在每个组件的methods中调用$http命令完成数据请求

三、在组件中使用

methods: {
      get(){
        this.$http({
          method:'get',
          url:'/url',
          data:{}
        }).then(function(res){
          console.log(res)
        }).catch(function(err){
          console.log(err)
        })
        
        this.$http.get('/url').then(function(res){
          console.log(res)
        }).catch(function(err){
          console.log(err)
        })
      }     
}

有关axios的配置请参考如下文档，点击打开链接