vue+vue-router+axios+element-ui构建vue实战项目之五（配置axios api接口调用）

上一篇文章《vue+vue-router+axios+element-ui构建vue实战项目之四（修改App.vue、router和page文件）》中，我们重新配置了默认文件，使得项目能够正常运行。但是，项目仅仅是‘跑’起来了，没有涉及到ajax请求接口的内容。

vue本身是不支持ajax请求接口的，所以我们需要第三方工具。

一般使用较多的有vue-resource和axios，我以前学习的时候使用的是vue-resource，但是今天我们使用axios。

安装axios

首先，我们先安装axios工具，如下

npm install axios --save

好了，axios工具安装完成。

有关axios的更多内容，请移步：https://www.npmjs.com/package/axios，中文资料请自行搜索。

调整main.js文件

调整后的代码，如下

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
//全局注册axios
Vue.prototype.$http = axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

全局注册后，就可以在其他页面按照this.$http这样的方式调用axios方法，不必每个页面引入axios。

不多说，我们来试一下，是否注册成功。

调整src/page/index.vue 文件

修改后的文件，内容如下

<template>
  <div>
    index page
  </div>
</template>
<script>
  export default {
    mounted (){
        this.$http.get('https://unpkg.com/axios@0.18.0/dist/axios.min.js')
        .then(res => {
          console.log(res);
        })
    }
  }
</script>

我们这里调用的接口是https://unpkg.com/axios@0.18.0/dist/axios.min.js，返回的结果就是axios的源码。

从浏览器中打印出结果，如下图所示，说明我们的配置是成功的。

好，如果你操作正确，代码没有格式错误的话，那么现在应该得到的结果是和我一样的。如果出错或者怎么样，请仔细的检查代码，看看有没有什么问题。

下一章，我们将学习用axios返回的结果，渲染出一个列表。

如果文章中存在错误的地方，麻烦请大家在评论中指正，以免误人子弟，谢谢！