nuxt项目中使用axios

项目环境:nuxt+vue+axios

针对问题:如何在vue框架nuxt中使用axios模块

解决思路:

               (1) 把nuxtjs-axios模块添加项目中

               (2) 配置nuxt.config.js

               (3) 简单使用

参考网址:http://www.axios-js.com/zh-cn/docs/nuxtjs-axios.html

注意事项:前台框架不同,使用的模块也有些不一样的。

              例如:你没有使用nuxt框架,只使用vue,那么添加axios模块方式是:npm install --save axios vue-axios

具体步骤:

1. 把nuxtjs-axios模块添加到项目

 yarn add @nuxtjs/axios       // 使用yarn来安装模块

 npm install @nuxtjs/axios  // 使用npm来安装模块

注:不同的包管理器,要使用不同的命

  1. 配置nuxt.config.js

    简单使用

modules: [
'@nuxtjs/axios'
],

如果这步完成,可以在项目中方法使用console.log(this) ,这时候可以看到该对象中有$axios属性了

如果你想使用代理可以这样写

modules: [
'@nuxtjs/axios'
],
/*
** Axios module configuration
*/
axios: {
proxy: true,
// prefix: '/api/',
credentials: true
// See https://github.com/nuxt-community/axios-module#options
},
proxy: {
'/api/': {
target: 'https://h5api.zhefengle.cn',//这个网站是开源的可以请求到数据的
pathRewrite: {
'^/api/': '/',
changeOrigin: true
}
}
},

vue中使用:

let that=this;
this.$axios.get("/api/index.html").then(res=>{
alert(res.data.code);
});

你可能感兴趣的:(nuxt项目中使用axios)