vue-cli 引入、配置axios的方法

Vue CLI 是 Vue.js 官方提供的一个构建工具，可以帮助我们快速生成 Vue.js 项目的各种资源文件。同时，Axios 是基于 Promise 的 HTTP 库，可以用于浏览器和 node.js 中，能够以简单、高效的方式实现 HTTP 请求。

以下是 Vue CLI 引入、配置 Axios 的方法：

1. 安装 Axios

在 Vue 项目中使用 Axios，首先需要安装 Axios ，可以通过 npm 或 yarn 安装：

# 使用 npm 安装
npm install axios --save

# 使用 yarn 安装
yarn add axios

2. 引入 Axios

在 Vue 项目中引入 Axios，可以在 main.js 文件中引入，并挂载到 Vue 的原型上：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$axios = axios

这样就可以在 Vue 实例里的所有组件中使用 this.$axios 进行 HTTP 请求了。

3. 配置 Axios

Axios 接收很多配置参数，可以在初始化 Axios 实例时进行配置。我们可以在一个单独的文件中配置 Axios 实例，例如在一个名为 axios.js 的文件中：

import axios from 'axios'

const instance = axios.create({
  // 配置默认的 baseURL，后续请求中的 url 只需填写相对路径即可
  baseURL: 'http://localhost:3000',

  // 配置请求超时时间
  timeout: 3000,

  // 配置请求头
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

  // 配置请求前的回调函数，用于处理各种请求前需要添加的通用参数
  transformRequest: [
    function (data) {
      let newData = ''
      for (let k in data) {
        if (data.hasOwnProperty(k) === true) {
          newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'
        }
      }
      return newData
    }
  ],
})

export default instance

然后可以在 main.js 文件中引入 axios.js 文件，像这样：

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

Vue.prototype.$axios = axios

然后就可以在 Vue 实例中使用 this.$axios 发送请求了。例如，在一个组件中使用 Axios 发送 GET 请求，并将响应结果显示在页面上：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',

  data() {
    return {
      list: []
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    getList() {
      this.$axios.get('/api/list').then(res => {
        this.list = res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

以上就是使用 Vue CLI 引入、配置 Axios 的攻略。