vue项目中使用axios来请求数据(附具体详细步骤和截图)

1,首先,我们需要安装axios的依赖包,安装依赖包有很多种方式,新手建议使用,进入cmd,然后输入vue ui命令,用视图鼠标点点点的方式安装。也可以在你的vue项目中的终端输入npm install axios安装,这种对于新手容易出错。

最后一种最适合新手,就是进入到vue ui视图界面,如下图

vue项目中使用axios来请求数据(附具体详细步骤和截图)

vue项目中使用axios来请求数据(附具体详细步骤和截图)

 

你可以进入vue项目的package.json文件中手动输入axios和它的版本信息,然后在vue项目的终端执行yarn命令,此时就会安装了,等待终端提示安装完毕即可。这种方法适合任何依赖包的安装,你只需要找到所需依赖名和它的版本号在package.json文件中手动输入,然后终端输入yarn命令安装就ok了。

 

vue项目中使用axios来请求数据(附具体详细步骤和截图)

vue项目中使用axios来请求数据(附具体详细步骤和截图)

2,安装好了axios依赖包后,我们还需要到main.js文件中进行配置一下。

vue项目中使用axios来请求数据(附具体详细步骤和截图)

3,然后找一个组件文件来编写,我这儿就以Home.vue文件为例。

vue项目中使用axios来请求数据(附具体详细步骤和截图)

下面是我那个请求数据链接里面的内容

vue项目中使用axios来请求数据(附具体详细步骤和截图)

4,最后,运行你的vue项目,我这儿是在Home.vue文件这儿访问的。

vue项目中使用axios来请求数据(附具体详细步骤和截图)

 

5,至此,在vue项目中用axios来访问数据就实现了。希望能够帮到大家,如果该文有不对的地方,也请浏览的前辈指出问题所在,让大家受益。谢谢