50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies（GitHub 个人资料）

📅 我们继续 50 个小项目挑战！—— GithubProfies组件

仓库地址：https://github.com/SunACong/50-vue-projects

项目预览地址：https://50-vue-projects.vercel.app/

使用 Vue 3 的 Composition API（<script setup>）结合 TailwindCSS 创建一个Github 用户信息展示组件。用户可以在输入框中搜索用户名，组件将通过 Github Public API 获取用户信息和其仓库数据并展示。

🎯 组件目标

• 用户输入 Github 用户名并提交
• 通过 Github API 获取用户信息
• 获取用户的公开仓库并展示
• 支持错误提示（如用户不存在）
• 使用 Vue 3 Composition API 管理状态
• 使用 TailwindCSS 构建响应式 UI
• 展示清晰的用户信息与仓库列表

⚙️ 技术实现点

🧱 组件实现

模板结构 <template>

<template>
    <div class="flex min-h-screen flex-col items-center justify-center bg-[#2a2a72] p-4 font-sans text-white">
        <form @submit.prevent="handleSubmit" class="mb-8 w-full max-w-xl">
            <input
                v-model="username"
                type="text"
                placeholder="Search a Github User"
                class="w-full rounded-lg bg-[#4c2885] p-4 text-white shadow-lg placeholder:text-[#bbb] focus:outline-none" />
        </form>

        <!-- 错误卡片 -->
        <div v-if="error" class="max-w-3xl rounded-2xl bg-[#4c2885] p-6 text-center shadow-lg">
            <h1 class="text-xl font-bold">{{ error }}</h1>
        </div>

        <!-- 用户信息卡片 -->
        <div v-else-if="user" class="flex w-full max-w-3xl flex-col rounded-2xl bg-[#4c2885] p-6 shadow-lg md:flex-row">
            <div class="flex flex-shrink-0 justify-center">
                <img :src="user.avatar_url" :alt="user.name" class="h-36 w-36 rounded-full border-[10px] border-[#2a2a72]" />
            </div>
            <div class="mt-4 ml-0 flex-grow md:mt-0 md:ml-8">
                <h2 class="mb-2 text-2xl font-bold">{{ user.name || user.login }}</h2>
                <p v-if="user.bio" class="mb-4">{{ user.bio }}</p>
                <ul class="mb-4 flex max-w-md justify-between text-sm">
                    <li>
                        {{ user.followers }}
                        <strong class="ml-1">Followers</strong>
                    </li>
                    <li>
                        {{ user.following }}
                        <strong class="ml-1">Following</strong>
                    </li>
                    <li>
                        {{ user.public_repos }}
                        <strong class="ml-1">Repos</strong>
                    </li>
                </ul>
                <div class="flex flex-wrap gap-2">
                    <a v-for="repo in repos.slice(0, 5)" :key="repo.id" :href="repo.html_url" target="_blank"
                        class="inline-block rounded bg-[#212a72] px-2 py-1 text-xs text-white">
                        {{ repo.name }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

脚本逻辑 <script setup>

<script setup>
import { ref } from 'vue'

const API_URL = 'https://api.github.com/users/'

const username = ref('')
const user = ref(null)
const repos = ref([])
const error = ref('')

const getUser = async (name) => {
    try {
        error.value = ''
        const res = await fetch(API_URL + name)
        if (!res.ok) {
            throw new Error('Not Found')
        }
        user.value = await res.json()
        console.log(user.value)

        await getRepos(name)
    } catch (err) {
        error.value = 'No profile with this username'
        user.value = null
        repos.value = []
    }
}

const getRepos = async (name) => {
    try {
        const res = await fetch(`${API_URL}${name}/repos?sort=created`)
        if (!res.ok) {
            throw new Error('Repo Fetch Failed')
        }
        repos.value = await res.json()
    } catch (err) {
        error.value = 'Problem fetching repos'
    }
}

const handleSubmit = () => {
    const trimmed = username.value.trim()
    if (trimmed) {
        getUser(trimmed)
        username.value = ''
    }
}
</script>

样式部分 <style scoped>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
:root {
    font-family: 'Poppins', sans-serif;
}
</style>

🔍 重点效果实现

✅ 用户信息获取

通过 fetch() 请求 Github API 获取用户信息：

const res = await fetch(API_URL + name)

如果用户不存在，抛出错误并设置提示信息。

💡 获取用户仓库

使用 repos 接口获取用户公开仓库：

const res = await fetch(`${API_URL}${name}/repos?sort=created`)

并在页面上展示前 5 个仓库。

🎮 表单提交处理

使用 @submit.prevent 阻止默认提交行为并触发请求：

<form @submit.prevent="handleSubmit">

输入框使用 v-model 双向绑定用户名：

<input v-model="username" type="text" />

🎨 动态条件渲染

根据状态显示不同的内容：

<div v-if="error">...</div>
<div v-else-if="user">...</div>

🎨 TailwindCSS 样式重点讲解

这些 TailwindCSS 类帮助我们快速构建了一个美观、响应式的用户信息展示组件。

📁 常量定义 + 组件路由

constants/index.js 添加组件预览常量：

{
        id: 28,
        title: 'Github Profiles',
        image: 'https://50projects50days.com/img/projects-img/28-github-profiles.png',
        link: 'GithubProfiles',
    },

router/index.js 中添加路由选项：

{
        path: '/GithubProfiles',
        name: 'GithubProfiles',
        component: () => import('@/projects/GithubProfiles.vue'),
    },

🏁 总结

基于 Vue 3 和 TailwindCSS 的 Github 用户信息展示组件不仅实现了基本的用户搜索功能，还展示了如何使用 Vue 的响应式能力、异步请求和条件渲染构建一个完整的功能页面。

你可以进一步扩展此组件的功能包括：

• ✅ 添加加载动画（如请求时显示 spinner）
• ✅ 支持分页展示仓库
• ✅ 添加本地缓存（如使用 localStorage）
• ✅ 支持主题切换（暗色/亮色）
• ✅ 将组件封装为 <GithubUserCard /> 可复用组件

👉 下一篇，我们将完成Double Click Heart组件，双击点赞的设计。🚀

感谢阅读，欢迎点赞、收藏和分享 😊