当前位置：首页 > VUE

vue实现github

2026-03-07 11:43:43VUE

Vue 实现 GitHub 相关功能

使用 Vue 实现 GitHub 相关功能通常涉及调用 GitHub API 获取数据并在前端展示。以下是一个基本的实现方案：

创建 Vue 项目

使用 Vue CLI 创建一个新项目：

vue create github-app
cd github-app

安装必要依赖

需要安装 axios 用于 API 调用：

npm install axios

配置 GitHub API 访问

在 src 目录下创建 services/github.js 文件：

import axios from 'axios'

const githubApi = axios.create({
  baseURL: 'https://api.github.com',
  headers: {
    Accept: 'application/vnd.github.v3+json'
  }
})

export default {
  getUser(username) {
    return githubApi.get(`/users/${username}`)
  },
  getRepos(username) {
    return githubApi.get(`/users/${username}/repos`)
  }
}

创建用户搜索组件

在 src/components 目录下创建 GithubUser.vue：

<template>
  <div>
    <input v-model="username" placeholder="GitHub用户名">
    <button @click="searchUser">搜索</button>

    <div v-if="user">
      <h3>{{ user.name }}</h3>
      <img :src="user.avatar_url" width="100">
      <p>关注者: {{ user.followers }}</p>
    </div>

    <div v-if="repos.length">
      <h4>仓库列表</h4>
      <ul>
        <li v-for="repo in repos" :key="repo.id">
          {{ repo.name }} - {{ repo.stargazers_count }} stars
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import githubService from '../services/github'

export default {
  data() {
    return {
      username: '',
      user: null,
      repos: []
    }
  },
  methods: {
    async searchUser() {
      try {
        const userResponse = await githubService.getUser(this.username)
        this.user = userResponse.data

        const reposResponse = await githubService.getRepos(this.username)
        this.repos = reposResponse.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

在主应用中使用组件

修改 src/App.vue：

<template>
  <div id="app">
    <GithubUser />
  </div>
</template>

<script>
import GithubUser from './components/GithubUser.vue'

export default {
  components: {
    GithubUser
  }
}
</script>

添加环境变量

创建 .env 文件存储 GitHub 访问令牌（可选）：

VUE_APP_GITHUB_TOKEN=your_github_token

然后修改 services/github.js 添加认证：

const githubApi = axios.create({
  baseURL: 'https://api.github.com',
  headers: {
    Accept: 'application/vnd.github.v3+json',
    Authorization: process.env.VUE_APP_GITHUB_TOKEN ? `token ${process.env.VUE_APP_GITHUB_TOKEN}` : ''
  }
})