vue-axios安装-优快云博客

本文介绍如何在Vue项目中安装和配置Axios，并提供示例代码展示如何使用Vue-resource及Vue-Axios进行HTTP请求。通过不同方法对比，帮助开发者理解Vue环境下HTTP请求的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-axios + axios 入坑基础安装

首先，有时候直接安装 axios 在 vuecil 会报错

先安装！

npm install axios

然后！

npm install --save axios vue-axios

配置模板（index.js）

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

在脚手架里面的用法！

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

自己写的一个简单例子有vue-resource和vue-axios：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <title>vue-resource的使用</title>

    <style>

    </style>
</head>
<body>
    <div id="app" clsas = "content">
            <h1>vue-resource的使用</h1>
            <a href="javascript:;" class = "btn btn-primary" v-on:click = "get">get</a>
            <a href="javascript:;" class = "btn btn-primary" @click = "getAxios">getAxios</a>
            <a href="javascript:;" class = "btn btn-primary" v-on:click = "post">post</a>
            <a href="javascript:;" class = "btn btn-primary" v-on:click = "postAxios">postAxios</a>
            <div>{{msgs}}</div>
    </div>

    <script>    
        new Vue ({
            el:"#app",
            data:{
                msgs:''
            },
            methods:{
                get:function() {
                    this.$http.get("../package.json" ,{
                        params:{
                            usedId:"34",
                            usedName:"get"
                        },
                        headers:{
                            toker:'12'
                        }
                    }).then(res =>{
                        this.msgs = res.data;
                    }).catch(res =>{
                        this.msgs = res.data;
                    })
                },
                getAxios:function() {
                    axios.get("../package.json" ,{
                        params:{
                            usedId:"34",
                            usedName:"getaxios"
                        },
                        headers:{
                            toker:'12'
                        }
                    }).then(res =>{
                        this.msgs = res.data;
                    }).catch(res =>{
                        this.msgs = res.data;
                    })
                },
                postAxios:function() {
                    axios.post("./package.json",{
                        data:{
                            userage:"234",
                            userNumber:"postaxios"
                        },
                        headers:{
                            tokers:7878
                        }
                    }).then(res => {
                        this.msgs = res.data;
                    })
                },
                post:function() {
                    this.$http.post("../package.json",{
                            userage:"234",
                            userNumber:"post",
                        headers:{
                            tokers:7878
                        }
                    }).then(res => {
                        this.msgs = res.data;
                    }).catch(res =>{
                        this.msgs = res.data;
                    })
                },
            }

        });
    </script>
</body>
</html>

PS：平时在别的地方也用 axios 挺好用的

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

直接引入速度快！

axios的API链接