基于nuxt的vue项目配置axios，实现网络请求

自己写了一个基于nuxt搭建ant-design-vue框架的后台管理项目，这个项目是自己工作之余拿来练手的，通过这个项目让自己去学习一下nuxt的服务端渲染的功能，这个过程会涉及到很多东西，凡是我觉得在开发过程中代码习惯，接口调用的优化等等，有用技巧我都会记录下来，涉及到很多知识点哦,这一章就是配置axios。

在初始化nuxt项目安装axios

1.项目初始化阶段就可以安装好axios接下来就是在项目中配置的问题了，如果没有安装的话可以自己选择手动安装一下通过

npm i axios --save-dev

进行安装.

2.安装完成后在plugins文件夹底下创建一个axois.js文件 引入已经安装好的axios插件

import axios from 'axios'
export default axios

成功效果图

配置好axios后，现在可以在vue文件中进行引入并且调用了，现在现看看我们是否引入成功

vue文件.png

控制台打印.png

出现打印的函数书名我们已经引入成功。后续就是扩展自己配置的接口。

优化接口

在请求接口的过程中，实际需求涉及到很多请求的接口，我们可以通过一个接口配置文件进行管理，将所有vue文件的请求全部抽取出来，方面以后接口修改与参数调整等等
废话不多说 直接上图上代码：

微信图片_20191217164253.png

根据图片创建文件夹与文件,在index.js文件中编写下面的代码

/**
 * author : Weitao.Ma
 * createTime : 2019/12/17 11:35
 * contact 17753908176
 */
import axios from '~/plugins/axios'

/**
 *
 * @type {{login: (function(): (Q.Promise | Promise> | * | void))}}
 */
export const userApi ={
  /**
   * @function 登录
   * @return {Q.Promise | Promise> | * | void}
   */
  login:()=>{
    return axios.post('/admin/login')
  }
}

然后在vue中引入api，如下代码

import {userApi} from '~/api/index'

调用如下

下一节，配置express+mockJs，实现数据请求接口的实现。