从零开始实现 GitHub 仓库导航器（Windows 实操版）

💡 提示：以下所有操作都在你已创建的 Vite 项目根目录下进行。

步骤 1️⃣：确认项目结构

运行 dir（Windows）查看当前文件：

css 复制代码

├── index.html
├── package.json
├── src/
│   ├── main.jsx
│   └── App.jsx
└── ...

这是 Vite 默认生成的 React 项目骨架。

步骤 2️⃣：安装必要依赖（Windows 兼容）

在终端中依次执行（注意：Windows 下 npm install 行为与 macOS/Linux 一致）：

bash 复制代码

# 安装路由
npm install react-router-dom

# 安装 Stylus（用于写更简洁的 CSS）
npm install -D stylus

✅ Windows 用户无需额外配置，Vite 对 Stylus 的支持开箱即用。

步骤 3️⃣：改造 App.jsx ------ 添加路由与布局

将 src/App.jsx 替换为以下内容：

javascript 复制代码

// src/App.jsx
import { Outlet } from 'react-router-dom'
import './App.styl' // 我们稍后创建这个文件

export default function App() {
  return (
    <>
      <header>
        <h1>📦 GitHub 仓库导航器</h1>
        <nav>
          <a href="/">首页</a>
          {/* 后续可加 About */}
        </nav>
      </header>
      <main>
        <Outlet /> {/* 子路由渲染位置 */}
      </main>
    </>
  )
}

🔧 注意：我们暂时用 <a href="/"> 而非 <Link>，因为尚未配置路由提供者。

步骤 4️⃣：创建首页组件 ------ 拉取 GitHub 仓库

新建 src/pages/Home.jsx：

javascript 复制代码

// src/pages/Home.jsx
import { useState, useEffect } from 'react'

export default function Home() {
  const [repos, setRepos] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    // 替换成你的 GitHub 用户名！
    const username = 'Qilana666'
    
    fetch(`https://api.github.com/users/${username}/repos`)
      .then(res => {
        if (!res.ok) throw new Error('无法获取仓库，请检查用户名')
        return res.json()
      })
      .then(data => {
        setRepos(data)
        setLoading(false)
      })
      .catch(err => {
        setError(err.message)
        setLoading(false)
      })
  }, [])

  if (loading) return <p>正在加载 GitHub 仓库...</p>
  if (error) return <p style={{ color: 'red' }}>❌ {error}</p>

  return (
    <div className="repo-list">
      {repos.map(repo => (
        <div key={repo.id} className="repo-card">
          <a 
            href={repo.html_url} 
            target="_blank" 
            rel="noopener noreferrer"
          >
            <h2>{repo.name}</h2>
            <p>{repo.description || '暂无描述'}</p>
          </a>
        </div>
      ))}
    </div>
  )
}

⚠️ 重要：请将 'Qilana666' 替换为你自己的 GitHub 用户名！

步骤 5️⃣：配置路由入口

修改 src/main.jsx：

javascript 复制代码

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import App from './App.jsx'
import Home from './pages/Home.jsx'
import './index.styl' // 全局样式

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <Home /> }
    ]
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

步骤 6️⃣：添加样式（使用 Stylus）

将 src/index.css 重命名为 src/index.styl
将 src/App.css 重命名为 src/App.styl
在 main.jsx 和 App.jsx 中更新 import 路径（如上所示）

编辑 src/index.styl（全局重置）：

less 复制代码

/* src/index.styl */
* 
  margin: 0
  padding: 0
  box-sizing: border-box

body
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
  line-height: 1.6
  background: #f8f9fa
  color: #333
  padding: 20px

编辑 src/App.styl（组件样式）：

yaml 复制代码

/* src/App.styl */
header
  text-align: center
  margin-bottom: 2rem

  h1
    font-size: 2rem
    margin-bottom: 0.5rem

  nav a
    text-decoration: none
    color: #09f
    margin: 0 10px

.repo-list
  display: grid
  gap: 1rem
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))

.repo-card
  background: white
  border-radius: 8px
  padding: 1rem
  box-shadow: 0 2px 6px rgba(0,0,0,0.1)
  transition: transform 0.2s

  &:hover
    transform: translateY(-4px)

  a
    text-decoration: none
    color: inherit

  h2
    margin-bottom: 0.5rem
    color: #09f

  p
    color: #666
    font-size: 0.95rem

✅ Stylus 在 Windows 下无需额外配置，Vite 会自动编译 .styl 文件！

步骤 7️⃣：重启开发服务器

在终端按 Ctrl + C 停止当前服务，然后重新运行：

arduino 复制代码

npm run dev

打开浏览器访问 http://localhost:5173（端口可能不同），你应该能看到：

页面标题 "GitHub 仓库导航器"
自动加载你的 GitHub 公开仓库列表
点击任意仓库 → 在新标签页打开其 GitHub 主页 ✅

💡 答疑解惑（Windows 用户专属）

Q1：PowerShell 报错 "无法加载文件... 因为在此系统上禁止运行脚本"？

A：这是 Windows 执行策略限制。解决方法：

sql 复制代码

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

输入后选 Y，即可运行 npm 脚本。

Q2：npm run dev 启动后地址是 127.0.0.1 而不是 localhost？

A：两者等价。若想强制显示 localhost，可在 vite.config.js 中添加：

arduino 复制代码

export default {
  server: {
    host: 'localhost'
  }
}

Q3：中文显示乱码？

A：确保你的代码文件保存为 UTF-8 编码（VS Code 右下角可切换）。Vite 默认以 UTF-8 服务资源。

Q4：GitHub API 返回空数组？

A：检查：

用户名是否拼写正确（区分大小写）
该用户是否有公开仓库
是否触发了 GitHub 的 60 次/小时/IP 限流（换个网络或等一小时）

🎉 最终效果与延伸建议

你现在拥有了一个：

在 Windows 系统 上成功运行
使用 Vite + React + Router 构建
能 实时拉取 GitHub 仓库 并 一键跳转
样式美观、响应式的前端小应用！

🔜 下一步你可以：

改成自己的用户名：让应用展示你的作品集
添加搜索框：动态切换不同用户的仓库

部署到 GitHub Pages：让全世界都能访问

arduino 复制代码

npm install -D gh-pages
# 在 package.json 中添加：
# "deploy": "gh-pages -d dist"
npm run build
npm run deploy

增加错误重试按钮：提升健壮性

💬 结语：

你不需要复杂的框架或昂贵的工具，

只需 npm init vite + 几行代码，

就能构建出连接真实世界数据的有用应用。

这，就是现代前端的魅力。✨

Happy coding on Windows! 💻❤️