当前位置：首页 > VUE

vue实现github

2026-02-10 11:53:54VUE

Vue 实现 GitHub 相关功能

使用 GitHub API 获取数据

通过 GitHub REST API 可以获取仓库、用户、提交记录等信息。需要在 Vue 项目中安装 axios 进行 HTTP 请求。

import axios from 'axios';

const GITHUB_API = 'https://api.github.com';

export default {
  data() {
    return {
      repos: [],
      username: 'vuejs'
    };
  },
  async created() {
    try {
      const response = await axios.get(`${GITHUB_API}/users/${this.username}/repos`);
      this.repos = response.data;
    } catch (error) {
      console.error('Error fetching GitHub repos:', error);
    }
  }
};

展示 GitHub 仓库列表

在模板中循环遍历获取到的仓库数据，展示仓库名称、描述、星标数等信息。

vue实现github

<template>
  <div>
    <h3>GitHub Repositories</h3>
    <ul>
      <li v-for="repo in repos" :key="repo.id">
        <a :href="repo.html_url" target="_blank">{{ repo.name }}</a>
        <p>{{ repo.description }}</p>
        <span>⭐ {{ repo.stargazers_count }}</span>
      </li>
    </ul>
  </div>
</template>

添加搜索功能

实现一个搜索框，允许用户输入不同的 GitHub 用户名来查看其仓库。

methods: {
  async searchRepos() {
    if (!this.username) return;
    try {
      const response = await axios.get(`${GITHUB_API}/users/${this.username}/repos`);
      this.repos = response.data;
    } catch (error) {
      console.error('Error searching GitHub repos:', error);
    }
  }
}

使用 GitHub OAuth 登录

如果需要实现 GitHub 登录功能，可以使用 GitHub OAuth 授权流程。

vue实现github

在 GitHub 开发者设置中创建 OAuth App
重定向用户到 GitHub 授权页面
处理回调获取 access token

const GITHUB_OAUTH_URL = 'https://github.com/login/oauth/authorize';
const CLIENT_ID = 'your_client_id';

// 重定向到 GitHub 授权页面
window.location.href = `${GITHUB_OAUTH_URL}?client_id=${CLIENT_ID}&scope=user`;

展示 GitHub 用户信息

获取并展示 GitHub 用户的基本信息。

async fetchUserInfo() {
  try {
    const response = await axios.get(`${GITHUB_API}/user`, {
      headers: {
        Authorization: `token ${this.accessToken}`
      }
    });
    this.userInfo = response.data;
  } catch (error) {
    console.error('Error fetching user info:', error);
  }
}

实现 GitHub 问题列表

展示特定仓库的问题列表。

async fetchIssues(owner, repo) {
  try {
    const response = await axios.get(`${GITHUB_API}/repos/${owner}/${repo}/issues`);
    this.issues = response.data;
  } catch (error) {
    console.error('Error fetching issues:', error);
  }
}