首先需要声明的是:本地请求,不用考虑跨域问题,这适用刚入坑的前端小白看,小白在做自己的项目时,通常都是用自己写的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脚手架用axios请求本地数据的更多相关文章

  1. vue 在发送axios请求时数据渲染问题

    这是我请求的json格式的数据 一开始在vue用普通的数据渲染,更改为vue后使用v-for 发现没办法渲染上去了. obj.data就是以上数据. 必须加上这三行给this随意赋个值,神奇的事情就会 ...

  2. VUE请求本地数据的配置json-server

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  3. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  4. ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...

  5. vue使用axios请求后端数据

    1. 安装axios $ npm install axios 2.在main.js里面导入axios import axios from 'axios' Vue.prototype.$http = a ...

  6. vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

    最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...

  7. axios请求本地的json文件在打包部署到子目录域名下,路径找不到

    前言: 因为要同时部署两个项目,有一个是部署到域名下面的子目录下,如:https://xxx.com/siot-admin vue 项目中使用axios请求了本地项目的static文件夹下的json文 ...

  8. 解决axios请求本地的json文件在打包后路径出错问题

    vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,在Hbuilder编辑器打开,页面报错404: 在浏览器打开的路径 http:/ ...

  9. vue使用axios请求本地json文件出现404

    之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下   位置根据json文件决定,但是必须是http://localhost:断口号

随机推荐

  1. 【Java】移动JDK路径后,修改环境变量不生效 Error: could not open `C:\Program Files\Java\jre1.8.0_131\lib\amd64\jvm.cfg'

    场景: JDK原先装在C盘的,现在移动到了D盘,并在环境变量修改了%JAVA_HOME%的新路径,但是CMD中输入java后依然报错. Error: could not open `C:\Progra ...

  2. Docker镜像中的base镜像理解

    base 镜像有两层含义: 不依赖其他镜像,从 scratch 构建. 其他镜像可以之为基础进行扩展. 所以,能称作 base 镜像的通常都是各种 Linux 发行版的 Docker 镜像,比如 Ub ...

  3. iOS系统及客户端软件测试的基础介绍

    iOS系统及客户端软件测试的基础介绍 iOS现在的最新版本iOS5是10月12号推出,当前版本是4.3.5 先是硬件部分,采用iOS系统的是iPad,iPhone,iTouch这三种设备,其中iPho ...

  4. php中urlencode和urldecode的用法

    URLEncode:是指针对网页url中的中文字符的一种编码转化方式,最常见的就是Baidu.Google等搜索引擎中输入中文查询时候,生成经过Encode过的网页URL.URLEncode的方式一般 ...

  5. 路由查询命令tracert

    from:https://jingyan.baidu.com/article/9c69d48f4df25713c8024e66.html 在命令行中输入“tracert ”并在后面加入一个IP地址,可 ...

  6. C语言实现mq收发数据的函数

    amqsget.c 从mq中读取消息 #include <stdio.h> #include <stdlib.h> #include <string.h> #inc ...

  7. Servlet知识点回顾

    一.Servlet生命周期 服务器调用一个Servlet的8个步骤: 1.在服务器启动时,当Servlet被配置好或者被客户首次请求时,由服务器加载servlet,这一步相当于下列代码: Class ...

  8. Android Studio开发第一篇QuickStart

    为什么把as的环境开发放在gradle里呢,因为eclipse里装gradle插件还是不够方便,as直接集成了,然后正好as也是大势所趋,学习一下正好. 看到右边Quick Start快速启动栏下面 ...

  9. 【python】并查集

    转自:http://blog.csdn.net/rav009/article/details/12781899 # -*- coding: UTF-8 -*- class unionfind: def ...

  10. mysqldump命令的安装

    author:headsen   chen date:2019-03-14  11:31:00 安装:yum -y install mysql-client / apt-get install mys ...