网站导航
> 技术文档 > 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies（GitHub 个人资料）

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

网友: 技术文档 2025-07-30 13:10:07

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

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

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

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

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

🎯 组件目标

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

⚙️ 技术实现点

技术点 描述 Vue 3 使用响应式变量管理用户信息、仓库、错误状态 ref 响应式变量 控制 username、user、repos 和 error v-model 绑定输入框内容 @submit.prevent 阻止默认表单提交行为并触发请求 fetch() 请求 Github 用户信息与仓库数据 错误处理 使用 try/catch 捕获请求错误 TailwindCSS 布局类 构建全屏布局、卡片样式、响应式设计 动态条件渲染 v-if, v-else-if 根据状态显示错误、用户信息或空状态

🧱 组件实现

模板结构 

<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>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>

样式部分 

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

🔍 重点效果实现

✅ 用户信息获取

通过 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 样式重点讲解

类名 作用 flex min-h-screen flex-col items-center justify-center 全屏居中布局 bg-[#2a2a72], text-white 设置主题颜色 rounded-lg, shadow-lg 输入框与卡片阴影样式 border-[10px] border-[#2a2a72] 头像边框样式 flex-wrap gap-2 仓库标签自动换行与间距 text-xs, rounded, bg-[#212a72] 仓库标签样式 max-w-3xl, md:flex-row 响应式布局控制

这些 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）
  • ✅ 支持主题切换（暗色/亮色）
  • ✅ 将组件封装为 可复用组件

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

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

网络标签：

相关问题