使用 cnpm 安裝 axios
cnpm install axios --save-dev
安裝其他插件的時候汗盘，可以直接在 main.js 中引入并 Vue.use()登渣，但是 axios 并不能 use铣口，只能每個需要發(fā)送請求的組件中即時引入為了解決這個問題运怖，有兩種開發(fā)思路卖子，一是在引入 axios 之后，修改原型鏈官觅，二是結(jié)合 Vuex古劲，封裝一個 aciton。這里只說修改原型鏈的方式改寫原型鏈
首先在 main.js 中引入 axios
import axios from 'axios'
這時候如果在其它的組件中缰猴，是無法使用 axios 命令的。所以我們將 axios 改寫為 Vue 的原型屬性
Vue.prototype.$http= axios
在 main.js 中添加了這兩行代碼之后疤剑，就能直接在組件的 methods 中使用 $http命令例如
methods: { show() { this.$http({ method: 'get', url: '/user', data: { name: 'virus' } }) }
配置 axios
實際上只有 url 是必須的滑绒，完整的 api 可以參考https://www.kancloud.cn/yunye/axios/234845
axios.post('/user', { params:{ name:"virus" }})
完整的請求還應(yīng)當包括 .then 和 .catch
.then(function(res){ console.log(res) }) .catch(function(err){ console.log(err) })
當請求成功時，會執(zhí)行 .then隘膘，否則執(zhí)行 .catch這兩個回調(diào)函數(shù)都有各自獨立的作用域疑故，如果直接在里面訪問 this，無法訪問到 Vue 實例,這時只要添加一個 .bind(this) 就能解決這個問題
.then(function(res){ console.log(this.data) }.bind(this))
另外弯菊，補充
vue cli腳手架前端調(diào)后端數(shù)據(jù)接口時候的本地代理跨域問題纵势，如我在本地localhost訪問接口http://40.00.100.100:3002/是要跨域的，相當于瀏覽器設(shè)置了一到門檻管钳，會報錯XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 為什么跨域同源非同源自己去查吧钦铁，在webpack配置一下proxyTable就OK了，如下 config/index.js
dev: { //加入以下
proxyTable:{
'/api': { target: 'http://40.00.100.100:3002/',//設(shè)置你調(diào)用的接口域名和端口號 別忘了加http changeOrigin: true,
pathRewrite: {
'^/api': '/'
//這里理解成用‘/api’代替target里面的地址才漆，
后面組件中我們掉接口時直接用api代替 比如我要調(diào) 用'http://40.00.100.100:3002/user/add'牛曹，直接寫‘/api/user/add’即可 } } },
