Vue框架Element UI教程-axios请求数据

1:进入项目,npm安装

   npm install axios --save

Vue框架Element UI教程-axios请求数据

2.在main.js下引用axios

  import axios from 'axios'

Vue框架Element UI教程-axios请求数据

3:准备json数据
自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据
http://www.intmote.com/test.json

4:跨域问题,设置代理,利用proxyTable属性实现跨域请求
在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码

Vue框架Element UI教程-axios请求数据

Vue框架Element UI教程-axios请求数据

5:打开一个界面User.vue,开始写请求数据的方法

Vue框架Element UI教程-axios请求数据

Vue框架Element UI教程-axios请求数据

User.vue参考代码:

Vue框架Element UI教程-axios请求数据

6:再次运行
npm run dev

这个时候,我们可以看见,请求的数据

Vue框架Element UI教程-axios请求数据

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1

上一篇:vue与element ui的el-checkbox的坑


下一篇:vue开源Element UI表单设计及代码生成器