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;
		})
	},
}
相关推荐
恰薯条的屑海鸥几秒前
零基础学前端-传统前端开发(第三期-CSS介绍与应用)
前端·css·学习·css3·前端开发·前端入门·前端教程
海盐泡泡龟2 分钟前
盒模型小全
前端·css·盒模型
OpenTiny社区12 分钟前
HDC2025即将拉开序幕!OpenTiny重新定义前端智能化解决方案~
前端·vue.js·github
奇舞精选15 分钟前
前端开发中AI的进阶之路:从思维重构到工程落地
前端·人工智能
zhoxier17 分钟前
element-ui 的el-table,多选翻页后,之前选择的数据丢失问题处理
vue.js·ui·elementui
每天都想着怎么摸鱼的前端菜鸟18 分钟前
【uniapp】uniapp开发安卓应用接入谷歌登录获取idtoken
前端·google
anyup21 分钟前
震惊了!中石化将开源组件二次封装申请专利,这波操作你怎么看?
前端·程序员
Oriel22 分钟前
Strapi对接OSS:私有链接导致富文本图片过期问题的解决方案
前端
栀一一30 分钟前
@click和@click.stop的区别
vue.js