Vue框架引入Axios

首先已经创建好了 Vue 框架,安装好了 node.js。

没有完成的可按照此博客搭建:搭建Vue项目

之后打开终端,使用命令。

1、命令安装 axios 和 vue-axios
复制代码
npm install axios --save
npm install vue-axios --save
2、package.json 查看版本

在 package.json 文件里可查看下载好的依赖版本。

3、在 main.js 完整引入
复制代码
import axios from 'axios'
import VueAxios from 'vue-axios'
// VueAxios 与 axios 的位置不能交换,否则出现 TypeError: Cannot read property 'protocol' of undefined 
Vue.use( VueAxios , axios)
4.使用

初始化方法:

复制代码
methods:{
	getList(){
		this.axios.get('http://localhost:8000/user/getList',{
			params:{
				page:this.query.page,
				size:this.query.size,
				name:this.query.name
			}
		}).then((resp)=>{
			console.log(resp);
			this.tableData = resp.data.content.list;
			this.total = resp.data.content.total;
		})
	},
}
相关推荐
BD_Marathon几秒前
Vue3_双向绑定
前端·javascript·vue.js
小白学大数据7 分钟前
Temu 商品历史价格趋势爬虫与分析
开发语言·javascript·爬虫·python
仰望.9 分钟前
vue 甘特图 vxe-gantt 手动增加一条依赖线,删除连接线的用法
vue.js·甘特图·vxe-ui·vxe-gantt
霍理迪10 分钟前
CSS复合、关系、属性、伪类选择器
前端·javascript·css
棒棒的唐11 分钟前
Avue2图片上传使用object对象模式时,axios的请求模式用post还是get?
开发语言·前端·javascript·avue
OnlyEasyCode16 分钟前
Linux部署Nginx前后端web教程
linux·前端·nginx
亮子AI17 分钟前
【Typescript】未知类型如何处理?
linux·javascript·typescript
梵得儿SHI17 分钟前
Vue Router 路由管理从入门到精通:基础、导航与参数传递实战(含避坑指南)
前端·javascript·vue.js·路由基础配置·版本适配·路由实例创建·路由规则定义
IT_陈寒20 分钟前
JavaScript 性能优化实战:7 个让你的应用提速 50%+ 的 V8 引擎技巧
前端·人工智能·后端
Watermelo61721 分钟前
【前端实战】Axios 错误处理的设计与进阶封装,实现网络层面的数据与状态解耦
前端·javascript·网络·vue.js·网络协议·性能优化·用户体验