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

npm install axios --save

npm install qs --save

qs依賴包用post請求需要用到的

插入一個知識點：

npm install X --save 會把依賴包安裝在生產環境中，並且把依賴包名稱新增到 package.json 檔案 dependencies。 而如果npm install X --save-dev則會把依賴包安裝在開發環境中，並且新增到 package.json 檔案 devDependencies 如果vue專案要部署上線，為防止依賴包失效，一般採用–save

二、在main.js入口引用

import qs from 'qs';
import axios from "axios";

//下面是將$axios和$qs掛在原型上，以便在例項中能用 this.$axios能夠拿到
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
 

三、定義全域性變數複用域名地址

開發中的url一般是由協議+域名+介面路由+引數組成 一般 協議+域名 這兩個部分是在axios是需要一直被複用的，所以可以設定一個專業的全域性變數模組指令碼檔案，在模組裡直接定義初始值，用export default 暴露出去，再入口檔案main.js裡面引入這個檔案地址，並且使用Vue.prototype掛載到vue例項上面

• 首先在static檔案下面的config檔案裡面新建一個 global.js檔案（命名隨意）
• 在global.js檔案下定義全域性變數，這個專案我是定義伺服器地址。
• 在main.js入口檔案引用並掛載

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

四、請求後臺介面資料（get請求和post請求）

1.get請求

• 不需要帶引數的get請求

this.$axios.get(this.GLOBAL.host.+“後臺介面地址”).then(res => {
//獲取你需要用到的資料
})

• 需要帶引數的get請求

this.$axios.get(this.GLOBAL.host.+“後臺介面地址”,{
	params:{			
		phone:12345678   //引數，鍵值對，key值：value值
		name:hh
	}
}).then(res => {
	//獲取你需要用到的資料
});

2.post請求

var data = {phone：12345678，name：hh}  //定義一個data儲存需要帶的引數
this.$axios.post(this.GLOBAL.host+“後臺介面地址”，this.$qs.stringify(data)
).then(res =>{
	//獲取你需要的資料
});