Vue cli是一個(gè)針對(duì)Vue的腳手架工具，它提供了一個(gè)開(kāi)箱即用的項(xiàng)目模板，包含了一些基礎(chǔ)的配置，使我們可以快速搭建一個(gè)Vue應(yīng)用。Axios則是一個(gè)基于Promise的HTTP客戶(hù)端，可以在瀏覽器和Node.js中進(jìn)行HTTP異步請(qǐng)求。

使用Vue cli和Axios進(jìn)行開(kāi)發(fā)可以讓我們快速地構(gòu)建出一個(gè)異步數(shù)據(jù)交互的前端頁(yè)面。在Vue cli中，我們可以在vue.config.js中配置proxyTable，將本地端口與遠(yuǎn)程數(shù)據(jù)交互的接口進(jìn)行映射，然后在Vue組件中使用Axios進(jìn)行請(qǐng)求。

// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 與后端端口相同
pathRewrite: {
'^/api': ''
}
}
}
}
}

在組件中引入Axios，并在created生命周期中進(jìn)行異步請(qǐng)求：

import axios from 'axios'
export default {
created () {
axios.get('/api/user')
.then(response =>{
console.log(response)
})
.catch(error =>{
console.log(error)
})
}
}

當(dāng)我們?cè)跒g覽器中訪問(wèn)該頁(yè)面時(shí)，Axios會(huì)自動(dòng)向localhost:3000/api/user發(fā)送異步請(qǐng)求，獲取到后端的數(shù)據(jù)并進(jìn)行處理。

除了GET請(qǐng)求，Axios還支持POST、PUT等RESTful風(fēng)格的請(qǐng)求，以及文件上傳、設(shè)置請(qǐng)求頭、請(qǐng)求攔截等功能。在使用Axios時(shí)，我們也可以進(jìn)行全局配置，如設(shè)置默認(rèn)的請(qǐng)求頭、請(qǐng)求超時(shí)時(shí)間、響應(yīng)攔截等。

import axios from 'axios'
// 配置默認(rèn)的請(qǐng)求頭
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
// 設(shè)置request攔截器
axios.interceptors.request.use(config =>{
// 修改請(qǐng)求攔截配置
return config
}, error =>{
return Promise.reject(error)
})
// 設(shè)置response攔截器
axios.interceptors.response.use(response =>{
// 修改響應(yīng)攔截結(jié)果
return response
}, error =>{
return Promise.reject(error)
})

通過(guò)使用Vue cli和Axios，我們可以快速地構(gòu)建一個(gè)具備數(shù)據(jù)交互功能的Vue應(yīng)用，并進(jìn)行全局的客戶(hù)端網(wǎng)絡(luò)請(qǐng)求配置，提高開(kāi)發(fā)效率和用戶(hù)體驗(yàn)。