常用的发送一个ajax方式大概有：xhr jQuery axios fetch
遇到跨域问题可以使用代理服务器 nginx jsonp只能发送get方法。还有一种方法就是使用Vue cli的脚手架进行配置代理服务器。
这里我们使用axios来发送ajax请求。但是对于前端与后端不同

配置代理服务器

本案例需要下载axios库npm install axios
配置参考文档 Vue-Cli devServer.proxy
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写
下面代码是Vue官网的 生态系统-工具-Vue cli-配置参考-devServer.proxy

GitHub用户搜索案例

github搜索用户案例的代码连接

main文件中开启全局事件总线

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate(){
        // 设置全局事件总线
        Vue.prototype.$bus=this //把bus放在this里面来调用。
    }
})

APP.vue 存放两个案例的头部和现实的模板

<template>
    <div class="container">
        <!-- 头部 -->
        <gitSearch/>
        <gitList/>
        
    </div>
</template>

<script>
    import gitList from './components/gitList.vue'
    import gitSearch from './components/gitSearch.vue'
    export default {
        name:'App',
        components:{gitList,gitSearch},
    }
</script>
<style>
    

</style>

components文件下存有 gitSearch gitList两个文件一个是上面的查询框一个是下面的列表显示框

gitSearch.vue

<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;<button @click="searchUsers">Search</button>
        </div>
        </section>
</template>

<script>
import axios from 'axios'
export default {
    name:'gitSearch',
    data(){
        return{
            keyWord:'',
        }
    },
    methods:{
        // 点击查询按钮运行的代码
        searchUsers(){
            // 请求前的data数据状态 发送的是一个对象数据
            this.$bus.$emit("updateListData",{
                isFirst:false,
                isLoading:true,
                errMsg:'',
                useres:[],
            })
            //开启请求
            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response=>{
                    //请求成功了就进行事件总线传输数据
                    console.log('请求成功了',response.data);
                    this.$bus.$emit("updateListData",{
                        isLoading:false,
                        errMsg:'',
                        useres:response.data.items,
                    })
                },
                error=>{
                    this.$bus.$emit("updateListData",{
                        isLoading:false,
                        errMsg:error.message,
                        useres:[],
                    })
                },
                
            );
        }
    }
}
</script>

<style>

</style>

gitList.vue

<template>
    <div class="row">
        <div v-show="info.useres.length" class="card" v-for="user in info.useres" :key="user.login"> <!--  user.login 是登录账户 我们这边作为唯一key值 当然用user.id也是可以的-->
            <a :href="user.html_url" target="_blank">
            <img :src="user.avatar_url" style='width:100px'/>
            </a>
            <p class="card-text">{{user.login}}</p>
        </div>
        <!-- 欢迎 -->
        <h1 v-show="info.isFirst">欢迎使用</h1>
        <!-- 加载 -->
        <!-- <h1 v-show="info.isLoading">加载中....</h1> -->
        <div v-show="info.isLoading" class="card" v-for="user of 15" :key="user"> <!--  user.login 是登录账户 我们这边作为唯一key值 当然用user.id也是可以的-->
            <a href="#" target="_blank">
            <img src="../../public/loading.gif" style='width:100px'/>
            </a>
            <p class="card-text">{{user.login}}</p>
        </div>
        <!-- 错误 -->
        <h1 v-show="info.errMsg">{{info.errMsg }}</h1>
    </div>
</template>

<script>
export default {
    name:'gitList',
    data(){
        return{
            info:{
                isFirst:true,
                isLoading:false,
                errMsg:'',
                useres:[],
            }
            
        }
    },
    mounted(){
        this.$bus.$on("updateListData",(dataObj)=>{
            // 接收数据处理
            this.info={...this.info,...dataObj}

        })
    }
}
</script>

<style scoped>
    .album {
    min-height: 50rem; /* Can be removed; just added for demo purposes */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #f7f7f7;
    }
    .card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
    }

    .card > img {
    margin-bottom: .75rem;
    border-radius: 100px;
    /* width: 100px; */
    }

    .card-text {
    font-size: 85%;
    }
</style>