1、下载axios
项目根目录下输入以下命令：
npm install axios --save
–save：将保存配置信息到pacjage.json的dependencies节点中。
–save-dev：将保存配置信息到pacjage.json的devDependencies节点中。
dependencies：运行时的依赖，生产环境下需要用的模块，发布时需要。
devDependencies：开发时的依赖。开发时需要用的模块，发布时不需要它。
安装结束后可以在package.json中看到axios
2、导入axios，并将axios对象赋值到Vue原型对象中
在main.js中
import axios from 'axios'
然后给Vue对象的原型上加一个( $ http)属性，并且将axios对象赋值给它，方便后续调用
Vue.prototype.$http = axios
3、在页面中的使用
想要使用axios，就需要拿到后端的接口，这里推荐一个免费的生成接口的网站，方便我们进行测试
官网： /
进入后需要注册账号，然后就可以使用了
点击新建仓库
填写仓库名称和说明就行了
提交后点击仓库名即可进入
默认只有一个示例接口，点击新建接口
填写后点击提交
左边会生成接口，点击这个接口，再点击右边的编辑
填写这些请求参数和响应内容
点击保存
点击这里
可以看到数据都生成了
再修改这几个数据
刷新刚刚的界面可以看到对应的数据改变了
然后就可以去前端调用数据了
在一个组件中使用如下方法
created() {this.$http.get("/app/mock/293070/user/findAll?page=1&rows=4").then((res)=>{console.log(res.data);});},
其中的url就是在刚刚打开的网页复制的
再去前端的控制台就可以看到这些数据了，说明接口是可以用的
在组件的data中写一个数组users
data(){return{users:[],}},
修改之前的方法
created() {this.$http.get("/app/mock/293070/user/findAll?page=1&rows=4").then((res)=>{// console.log(res.data);this.users=res.data.results;});},
这样就可以把取到的数据赋给前端了
我们可以写一个表格对数据进行遍历
<template><div><h1>用户列表</h1><table border="1" style="text-align: center;margin: auto"><tr><td>编号</td><td>姓名</td><td>年龄</td><td>生日</td><td>操作</td></tr><tr v-for="user in users"><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td>{{user.bir}}</td><td><a href="#">删除</a><a href="#">修改</a></td></tr></table></div></template>
在前端可以看到表格生成了
