第一步 使用 脚手架安装vue/axios 具体相关百度文档

第二步 在src文件里面新建文件夹api，在api文件里面新建两个js(ajax.js和index.js)

ajax.js里面对axios进行封装

import axios from 'axios'  //引用安装好的axios

const baseURL = 'http://admin.baidu.com/'
const service = axios.create({
    baseURL: baseURL, // url = base url + request url
    withCredentials: true, // send cookies when cross-domain requests
    // timeout: 5000, // request timeout
    crossDomain: true
})
//params 用于get请求 拼接在url后面
//data 用于post请求放在请求体里面
export default function ajax(url = '', params = {}, data = {}) {
    // 1. 定义promise对象
    let promise;
    return new Promise((resolve, reject) => {
        /* 拼在URL后面的参数 */
        let paramsStr = '';
              //如果所有接口有一个统一的必传的值可在这设置
        /*  paramsStr += 'version' + '=' + "1.4" + '&'; //版本
            paramsStr += 'app' + '=' + "1" + '&'; //app */
        Object.keys(params).forEach(key => {
            paramsStr += key + '=' + params[key] + '&'
        });
        if (paramsStr !== '') {
            paramsStr = paramsStr.substr(0, paramsStr.lastIndexOf('&'))
        }

        url += '?' + paramsStr;
        promise = service.post(url, data)
        // 3. 返回请求的结果
        promise.then((response) => {
            resolve(response.data)
        }).catch(error => {
            reject(error)
        })
    })
}

index.js

import ajax from './ajax'  //引用封装好的axios
const api = {} //新建一个api对象 里面放开发时使用的一系列接口
api.homePage = (params, data) => ajax(`api/home/homePage`, params, data)
export default api //将新建好的api对象模块指定默认输出 

在main.js里面进行引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import index from "./api/index.js" //引用 存放一系列接口的api对象

Vue.prototype.$api = index;  //设置全局变量  可以在各个页面中使用调用接口  不用在每个页面中单独导入使用
Vue.config.productionTip = false
new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

在某个页面中进行使用 比如在home.vue中使用

<template>
    <div>
        <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" />
        <van-swipe class="my-swipe" indicator-color="#3499fc" :autoplay="3000">
            <van-swipe-item v-for="(item,index) in banner" :key='index'>
                <van-image :src="item.img" fit="cover" width="100%" height="140px" />
            </van-swipe-item>
        </van-swipe>
        <van-grid>
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value: "sa",
                banner: ''
            }
        },
        methods: {
            uindex() {
           //直接调用全局方法 homePage 为你在index.js里面 设置的api.xxx方法  直接调用使用即可
                this.$api.homePage({
                    screen_type: "",
                    screen_id: "",
                    screen_name: ""
                }, {
                    token: ''
                }).then(res => {
                    // console.log(res)
                    this.banner = res.data.list.banner
                }).catch(function(error) {
                    console.log(error);
                });
            }
        },
        mounted() {
            //对调用接口方法进行加载
            this.uindex()
        },
        onLoad() {

        }  
    }
</script>

<style scoped>
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }

    .van-image {
        display: block;
    }
</style>