自己写了一个基于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<any> | Promise<AxiosResponse<T>> | * | void))}}
 */
export const userApi ={
  /**
   * @function 登录
   * @return {Q.Promise<any> | Promise<AxiosResponse<T>> | * | void}
   */
  login:()=>{
    return axios.post('/admin/login')
  }
}

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

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

调用如下

<template>
  <div class="loginWrapper">
    <a-form :form="form" @submit="handleSubmit" class="loginForm">
      <a-form-item label="Name" :label-col="{ span: 5, offset: 2 }" :wrapper-col="{ span: 10,offset: 2}" justify="space-around">
        <a-input
          id="name"
          v-decorator="[
            'Name',
            { rules: [{ required: true, message: '请输入用户名' }] },
          ]"
          placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item label="PassWord" :label-col="{ span: 6, offset: 1}" :wrapper-col="{ span: 10,offset: 2 }" justify="space-around">
        <a-input
          id="PassWord"
          v-decorator="[
            'PassWord',
            { rules: [{ required: true, message: '请输入密码' }] },
          ]"
          placeholder="请输入密码" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
      </a-form-item>
    </a-form>
  </div>

</template>

<script>
  import {userApi} from '~/api/index'
  export default {
    name: "login",
    data() {
      return {
        formLayout: 'horizontal',
        form: this.$form.createForm(this, { name: 'login_rule' }),
      };
    },
    created(){
    },
    methods: {
      handleSubmit(e) {
        e.preventDefault();
        const hide = this.$message.loading('正在登录,请稍后...', 0);
        setTimeout(hide, 1000);
        this.form.validateFields((err, values) => {
          if (!err) {
            userApi.login().then(res=>{
              console.log(res)
              this.$message.success('登录成功')
            })

          }
        });
      }
    },
  }
</script>

<style scoped>
  .loginWrapper{
    position: relative;
    height: 100%;
    background: #ccc;
  }
  .loginForm{
    position: absolute;
    width: 350px;
    height: 300px;
    background: #fff;
    left: 50%;
    margin-left: -175px;
    top: 50%;
    margin-top: -150px;
    padding-top: 15px;
  }
</style>

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