一、先安装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 =>{
//获取你需要的数据
});
五、 全部代码
// main.js文件
import axios from "axios";
import qs from 'qs';
import Global from '../static/config/global';Vue.prototype.$axios = axios
Vue.prototype.$qs = qs;
Vue.prototype.GLOBAL = Global;
// global.js文件
const host = '协议+域名地址+端口';
export default {
host
}
// 组件中发送axios请求（举个例子）
<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;
}
});
}
}
}</script><style scoped>
/*样式*/</style>
