vue-axios 是 axios 的封裝，讓 vue 的應用更容易整合。

安裝元件

npm install --save axios vue-axios

引入元件

// main.js
import Vue from 'vue'

import axios from 'axios'
import VueAxios from 'vue-axios'

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

Vue.config.productionTip = false
Vue.use(VueAxios, axios)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

使用元件

<template>
  <div class="hello">
      <button type="button" @click="getData">{{ msg }}</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    getData(){
      let api = '/getData'

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

使用起來與以往在 Angular.js 的場景很類似，重構起來還滿順手的。