本文重點介紹axios如何配合vue搭建專案框架，而axios的詳細使用介紹請移步

1、安裝

cnpm install axios --save-dev

2、引入
main.js 檔案引入：

import Vue from 'vue'//引入vue
import axios from 'axios'//引入axios
Vue.prototype.$axios = axios;//把axios掛載到vue上

3、使用

getStore(){
  let that = this
  that.$axios({
    method: "post",//指定請求方式
    url: "/business-app/getCityShopList.cgi",//請求介面（相對介面，後面會介紹到）
    data: {
      cityId: cityId,
      data:{},
      isDebug:"1",
      longitude: "",
      latitude: ""
    }//歡迎加入全棧開發交流圈一起學習交流：864305860
  })//面向1-3年前端人員
  .then(function(res){//幫助突破技術瓶頸，提升思維能力
    //介面成功返回結果執行
  })
  .catch(function(err){
　　　　　　//請求失敗或者介面返回失敗或者.then()中的程式碼發生錯誤時執行
  })
}
 

4、跨域與代理
在vue本地開發時請求總是發生跨域
解決方案：配置代理
config 下的index.js 檔案

`proxyTable: {`
`'/business-app/*'``: {`
`target:` `'[http://](http:)****:8080'``,//被代理的介面`
`changeOrigin:` `true``,`
`secure:``true` `// 如果是https介面，需要配置這個引數`
`}`
`},`

• 當URL以 '/business-app/'層級開端時，把 ‘http://****:8080’ 代理成本地IP

5、 baseURL與代理
兩者用途不一樣，
baseUrl會附加到你繫結的axios例項（如果是全域性的，那就是所有例項）上，即如果get/post的url引數是相對路徑（如） /api/c/xx，那就會執行 baseUrl + ‘/api/c/xx’,如果未指定baseUrl，那就走瀏覽器位址列裡的base + baseUrl。
webpack裡的proxyTable是測試環境為了避免瀏覽器下的跨域訪問，而以nodejs代理成同前端頁面（即瀏覽器位址列）同域的一種處理。指定proxyTable後， axios就不需要指定baseUrl了。proxyTable會把base + '/api/c/xx’代理到【base baseUrl + ‘/api/c/xx’】的介面地址上。
當然工程釋出時，後端和前端也需要釋出到同一個域下。
6、axios與vue-axios

Vue.prototype.$axios = axios
和
import Vueaxios from ‘vue-axios'
Vue.use(VueAxios,axios)

解釋：使用vue-axios更多是為了符合規範，並且方便協作
結語

感謝您的觀看，如有不足之處，歡迎批評指正。

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。