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;
		})
	},
}
相关推荐
Amumu1213820 分钟前
Js:正则表达式(一)
开发语言·javascript·正则表达式
小江的记录本30 分钟前
【Linux】《Linux常用命令汇总表》
linux·运维·服务器·前端·windows·后端·macos
无人机9011 小时前
Delphi 网络编程实战:TIdTCPClient 与 TIdTCPServer 类深度解析
java·开发语言·前端
lUie INGA2 小时前
rust web框架actix和axum比较
前端·人工智能·rust
OPHKVPS2 小时前
VoidStealer新型窃密攻击:首例利用硬件断点绕过Chrome ABE防护,精准窃取v20_master_key
前端·chrome
月光宝盒造梦师2 小时前
Ant Design Ellipsis 中的判断逻辑 isEleEllipsis 方法非常消耗性能
javascript·react·优化
gechunlian883 小时前
SpringBoot3+Springdoc:v3api-docs可以访问,html无法访问的解决方法
前端·html
驾驭人生3 小时前
ASP.NET Core 实现 SSE 服务器推送|生产级实战教程(含跨域 / Nginx / 前端完整代码)
服务器·前端·nginx
酉鬼女又兒4 小时前
零基础快速入门前端ES6 核心特性详解:Set 数据结构与对象增强写法(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6
慧一居士4 小时前
Vue项目中,子组件调用父组件方法示例,以及如何传值示例,对比使用插槽和不使用插槽区别
前端·vue.js