在 Vue 中进行数据交互，我们经常会向后端发起请求，获取数据，而 Vue 有一个官方插件 axios，用于处理 Web 请求。axios 安装方法非常简单，可以直接通过 npm 或 yarn 安装：

npm install axios
# 或者
yarn add axios

使用 axios 发送 GET 请求获取数据：

axios.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)

  })

使用 axios 发送 POST 请求提交数据：

axios.post('/api/data', {
  firstName: 'John',
  lastName: 'Doe',
  age: 28
})
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

可以设置 axios 的全局默认值，在每个请求中都会使用。比如设置请求头 Authorization：

axios.defaults.baseURL = 'https://example.com/api/'
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

在 Vue 中使用 axios，一般是在 methods 中定义一个方法，然后在组件中调用：

methods: {
  fetchData: function() {
    axios.get('/api/data')
      .then(response => {
        this.items = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在组件中使用：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="fetchData">Load Data</button>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        items: []
      }
    },
    methods: {
      fetchData: function() {
        axios.get('/api/data')
          .then(response => {
            this.items = response.data
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  }
</script>

这样，在组件中就可以使用 fetchData 方法了，点击 Load Data 按钮，会触发请求，获取数据展示在页面上。