vue脚手架用axios请求本地数据

时间:2021-04-21 06:40:37

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