一褂始、安裝axios、qs描函。

npm i axios --save-dev
npm i qs --save-dev

二崎苗、配置axios

在src下新建config文件夾。并新建js文件舀寓。
MT.js

// 引入axios胆数、qs
const axios = require('axios')
const qs = require('qs')
// 異步請求設置，允許跨域
axios.defaults.withCredentials = true
// 配置默認的host（如果有其他地方需要用到host互墓，可以新建一個js文件直接 export { baseUrl }）
let baseUrl = 'https://www.baidu.com'
const service = axios.create({})
// 添加請求攔截器
service.interceptors.request.use(function (config) {
　　// 在發(fā)送請求之前做些什么
　　return config
}, function (error) {
　　// 對請求錯誤做些什么
       Promise.reject(error)
});

// 添加響應攔截器
service.interceptors.response.use(function (response) {
　　// 對響應數(shù)據(jù)做點什么
　　return response
}, function (error) {
　　// 對響應錯誤做點什么
　　return Promise.reject(error)
});
// 配置接口請求方式
export const LYD = {
  POST(url, params, type) {
    if (type === 'json') {
      return service.post(baseUrl + url, params)
    } else {
      return service.post(baseUrl + url, qs.stringify(params), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        }
      })
    }
  },
  GET(url, params) {
    if (params) {
      return service.get(baseUrl + url + '/?' + qs.stringify(params), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        }
      })
    } else {
      return service.get(baseUrl + url + '/', {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        }
      })
    }
  }
}

配置完成后必尼，在src下新建service文件夾，新建index.js文件

import { LYD } from '../config/LYD'

// 調(diào)用接口---例如：
export const jiekou1 = params => LYD.POST("/def/post/jiekou1", params)
export const jiekou2 = params => LYD.GET("/def/get/jiekou2", params)

接下來就是如何使用了篡撵。
在頁面引入需要用到的接口方法名判莉。例如上面是jiekou1 、jiekou2

import { jiekou1, jiekou2 } from '@/service'
// 在mounted里直接調(diào)用
mounted () {
    // 調(diào)用接口
    jiekou1({
      id: 1
    }).then(res => {
      console.log(res)
    })
    jiekou2 ({
      type: 1
    }).then(res => {
      console.log(res)
    })
  }

這樣一個接口的基本配置就完成了育谬。demo地址：https://github.com/leiyunduo/Vue-Element-UI