方式一：使用vue-resource

npm install --sava vue-resource

 main.js 导入和使用

import VueResource from 'vue-resource'

Vue.use(VueResource) //给Vue对象添加$http属性  获得get()和post()方法

代码： 

<template>
  <div id="app">
    <p>the most star is <a href="repoUrl">{{repoName}}</a></p>
  </div>
</template>

<script>
    export default {
        data(){
            return{
                repoUrl:'',
                repoName: ''
            }
        },
        name: 'App',
        mounted() {
            this.$http.get('https://api.github.com/search/repositories?q=vu&sort=sta').then(
                response => {//成功回调函数
                    const result = response.data
                    const mostRepo = result.items[0]
                    this.repoName=mostRepo.name
                    this.repoUrl=mostRepo.html_url
                    alert('请求成功')
                },response=>{//失败回调函数
                    alert('请求失败')
                }
            )
        }
    }
</script>

<style>

</style>

效果图： 

方式二：使用axios  推荐使用！

npm install --sava axios

 在哪里用 就在那个组件引入

代码：

<template>
  <div id="app">
    <p>the most star is <a href="repoUrl">{{repoName}}</a></p>
  </div>
</template>

<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                repoUrl: '',
                repoName: ''
            }
        },
        name: 'App',
        mounted() {
            axios.get('https://api.github.com/search/repositories?q=vu&sort=sta').then(
                response => {
                    const result = response.data
                    const mostRepo = result.items[0]
                    this.repoName = mostRepo.name
                    this.repoUrl = mostRepo.html_url
                    alert('请求成功')
                }).catch(error => {
                alert('请求失败')
            })
        }
    }
</script>

 效果图和前面一样！