vue脚手架用axios请求本地数据
2023-09-11 14:19:41 时间
首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的json数据,之后用axios请求过来,渲染到页面上。
1、cnpm install axios --save (在终端安装 上axios,我是用的淘宝镜像安装的)
2、哪个组件使用axios方法请求数据,就在哪个组件里面引入,不用在main.js里面引入,不用改原型链
在组件的script标签内写: import axios from ‘axios’
3、在组件的methods配置项里使用axios
methods:{
fn(){
axios.get('url').then(function(res){
console.log(res.data)
}).catch(function(err){
console.log(err)
})
}
}
注意:在本地放置自己的json文件时,一定要放在项目的static文件夹下,因为static文件时,vue脚手架暴露在外面的静态文件,放在其他文件内用相对路径或绝对路径是访问不到的,这一点需要注意,踩了一下午坑,终于请求到本地的json数据了。
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue2的右键弹出菜单(vue-contextmenu)
- Vue_(组件通讯)组件
- 快速构建一个使用axios的vue应用程序(转)
- Easy Mock以及Vue+Mock.js模拟数据
- vue+webpack开发(一)
- Easy Mock以及Vue+Mock.js模拟数据
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Get up and running with vue-router
- vue.js3:父组件子组件互相访问数据方法(vue@3.2.37)
- vue.js3:在css中使用变量(vue@3.2.6)
- vue指令:v-model数据绑定
- vue指令:v-once 元素和组件只渲染一次,不会随着数据的改变而改变
- vue商城项目开发:axios发送请求及列表数据展示
- standalone vue initialization process - Vue应用的初始化过程
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- 遍历vue里面的数据。得到的数组。多了个后缀__ob__: Observer怎么处理?
- vue 中promise 异步请求数据
- vue动态 设置类名
- Vue、Vuejs从入门到精通 | 基本语法
- 216:vue+openlayers 加载GPX数据,导出geojson文件
- 016:vue+openlayer修改自定义地图版权信息( 示例代码 )
- 关于 Vue 方法前面的美元符号
- 如何解决npm run serve运行vue项目时,出现报错:Error: error:0308010C:digital envelope routines::unsupported
- 【vue】vue双向数据绑定的原理解析及代码实现_04
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(六)类别管理
- 基于Java+SpringBoot+Vue前后端分离即时通讯系统设计与实现