一、先安裝axios依賴，還有qs依賴

npm install axios --save

npm install qs --save

qs依賴包用post請(qǐng)求需要用到的

插入一個(gè)知識(shí)點(diǎn)：

npm install X --save 會(huì)把依賴包安裝在生產(chǎn)環(huán)境中，并且把依賴包名稱添加到 package.json 文件 dependencies。
而如果npm install X --save-dev則會(huì)把依賴包安裝在開發(fā)環(huán)境中，并且添加到 package.json 文件 devDependencies
如果vue項(xiàng)目要部署上線，為防止依賴包失效，一般采用–save

二、在main.js入口引用

import qs from 'qs';
import axios from "axios";//下面是將$axios和$qs掛在原型上，以便在實(shí)例中能用 this.$axios能夠拿到
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

三、定義全局變量復(fù)用域名地址

開發(fā)中的url一般是由協(xié)議+域名+端口+接口路由+參數(shù)組成
一般 協(xié)議+域名 這兩個(gè)部分是在axios是需要一直被復(fù)用的，所以可以設(shè)置一個(gè)專業(yè)的全局變量模塊腳本文件，在模塊里直接定義初始值，用export default 暴露出去，再入口文件main.js里面引入這個(gè)文件地址，并且使用Vue.prototype掛載到vue實(shí)例上面

• 首先在static文件下面的config文件里面新建一個(gè) global.js文件（命名隨意）

• 在global.js文件下定義全局變量，這個(gè)項(xiàng)目我是定義服務(wù)器地址。

• 在main.js入口文件引用并掛載

import Global from '../static/config/global'   //引用
Vue.prototype.GLOBAL = Global;   //掛載原型，可以使用this.GLOBAL拿到global.js的內(nèi)容

四、請(qǐng)求后臺(tái)接口數(shù)據(jù)（get請(qǐng)求和post請(qǐng)求）
1.get請(qǐng)求

• 不需要帶參數(shù)的get請(qǐng)求

this.$axios.get(this.GLOBAL.host.+“后臺(tái)接口地址”).then(res => {//獲取你需要用到的數(shù)據(jù)})

• 需要帶參數(shù)的get請(qǐng)求

this.$axios.get(this.GLOBAL.host.+“后臺(tái)接口地址”,{
    params:{            
        phone:12345678   //參數(shù)，鍵值對(duì)，key值：value值
        name:hh
    }
}).then(res => {    //獲取你需要用到的數(shù)據(jù)});

2.post請(qǐng)求

var data = {phone：12345678，name：hh}  //定義一個(gè)data儲(chǔ)存需要帶的參數(shù)this.$axios.post(this.GLOBAL.host+“后臺(tái)接口地址”，this.$qs.stringify(data)
).then(res =>{    //獲取你需要的數(shù)據(jù)});

五、 全部代碼

// main.js文件

import axios from "axios";import qs from 'qs';import Global from '../static/config/global';Vue.prototype.$axios = axiosVue.prototype.$qs = qs;Vue.prototype.GLOBAL = Global;

// global.js文件

const host = '協(xié)議+域名地址+端口';export default {
  host
}

// 組件中發(fā)送axios請(qǐng)求（舉個(gè)例子）

<template>
    <div class="sort">
        <li v-for="cate in categoryList" >{{cate.name}}</li>
    </div>
</template>
<script>
    export default {        
        created(){            
            this.getCategory();
        },
        data(){
               return{                
                   categoryList:[]
             }
        },        
        methods:{            
            getCategory:function(){                
           this.$axios.get(this.GLOBAL.host+"/虛擬接口/a/all_category").then(res => {                    
               var result=res.data;                    
               if(result.code==0){                        
                   this.categoryList=result.data;
                    }
                });
            }
        }