从零开始玩转 Vue.js：用 GitHub 和爬虫构建你的第一个实战项目
大家好，我是掘金上常写教程的全栈工程师小林。今天这篇教程，源于我当初学前端时的一个困惑：Vue 到底能做什么？学完基础语法后，怎么真正用它做出一个项目？
很多初学者卡在“学会了 v-for、v-if，但不知道下一步该干嘛”的阶段。今天，我们就以一个真实场景——从 GitHub 爬取开源项目数据并展示——带你深度体验 Vue.js 的完整开发生态。
注意：虽然用了“爬虫”一词，但我们不会真的写爬虫代码（浏览器端不能直接爬），而是通过 GitHub API 获取公开数据，这在实际开发中更安全、合规。
一、为什么选择 Vue.js？
Vue 是一套用于构建用户界面的渐进式框架。简单说：
- 渐进式：你可以只用它做页面局部交互，也可以搭配生态工具构建大型应用。
- 响应式：数据变了，页面自动更新，不用手动操作 DOM。
- 生态丰富：Vue Router（路由）、Pinia（状态管理）、Vite（构建工具）等一应俱齐全。
我当初学的时候，就是被它的“温柔上手曲线”吸引——写几行代码就能看到效果，成就感拉满！
二、环境准备：5 分钟搭好开发脚手架
我们使用 Vite + Vue 3 + TypeScript 组合，这是 2024 年最推荐的开发方式。
步骤如下：
安装 Node.js（>=16.0）
node -v # 检查是否安装成功创建项目
npm create vue@latest vue-github-explorer执行后按提示选择：
- ✔ Add TypeScript? → Yes
- ✔ Add JSX Support? → No
- ✔ Add Vue Router? → Yes（我们要做多页面）
- ✔ Add Pinia? → Yes（状态管理）
- 其他选 No 即可
进入项目并启动
cd vue-github-explorer npm install npm run dev
打开浏览器访问 http://localhost:5173，看到 Vue 的欢迎页就成功了！
三、核心概念速览：理解 Vue 的三大支柱
| 概念 | 作用 | 类比 |
|---|---|---|
| 响应式数据 (ref/reactive) | 数据变化自动更新视图 | 像 Excel 表格，改一个单元格，公式结果自动变 |
| 组件化 | 将 UI 拆分成独立可复用的块 | 像乐高积木，每个组件是一块积木 |
| 组合式 API (setup()) | 组织逻辑的新方式（Vue 3 推荐） | 像函数式编程，把相关逻辑放在一起 |
举个最简单的例子：
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
</script>
<template>
<button @click="increment">点了 {{ count }} 次</button>
</template>
ref 让 count 变成响应式，点按钮时页面自动更新——这就是 Vue 的魔法。
四、实战：做一个 GitHub 仓库探索器
我们要做一个小应用：输入用户名，展示该用户的热门仓库列表。
第一步：设计页面结构
我们有两个页面：
- 首页
/：输入用户名 - 仓库页
/repos/:username：展示仓库列表
得益于前面创建项目时选了 Vue Router，路由已自动配置好。
第二步：调用 GitHub API
GitHub 提供免费的 REST API，比如：
GET https://api.github.com/users/vuejs/repos
返回该用户的所有仓库信息（JSON 格式）。
⚠️ 注意：浏览器直接请求会跨域！但 GitHub API 支持 CORS，所以本地开发可以正常调用。
第三步：封装 API 请求（使用 fetch）
新建 src/api/github.ts：
// api/github.ts
export const fetchRepos = async (username: string) => {
const res = await fetch(`https://api.github.com/users/${username}/repos`)
if (!res.ok) throw new Error('用户不存在或请求失败')
return res.json()
}
第四步：在组件中使用
修改 src/views/ReposView.vue：
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { fetchRepos } from '@/api/github'
const route = useRoute()
const username = String(route.params.username)
const repos = ref<any[]>([])
const loading = ref(true)
const error = ref('')
onMounted(async () => {
try {
repos.value = await fetchRepos(username)
} catch (err: any) {
error.value = err.message
} finally {
loading.value = false
}
})
</script>
<template>
<div class="repos-page">
<h2>{{ username }} 的仓库</h2>
<div v-if="loading">加载中...</div>
<div v-else-if="error" class="error">{{ error }}</div>
<ul v-else>
<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>
第五步：添加首页表单
在 HomeView.vue 中添加输入框和跳转逻辑：
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const username = ref('')
const router = useRouter()
const handleSubmit = () => {
if (username.value.trim()) {
router.push(`/repos/${username.value}`)
}
}
</script>
<template>
<div class="home">
<h1>🔍 GitHub 仓库探索器</h1>
<form @submit.prevent="handleSubmit">
<input v-model="username" placeholder="输入 GitHub 用户名" />
<button type="submit">搜索</button>
</form>
</div>
</template>
现在，运行项目，输入 vuejs，就能看到 Vue 官方仓库列表了！
五、新手常见问题解答
Q1：为什么我的 API 请求失败了？
- 检查用户名是否拼写正确（区分大小写）
- GitHub 对未认证请求有速率限制（每小时 60 次），刷新太多会报 403。解决办法：登录 GitHub 或稍后再试。
Q2：ref 和 reactive 有什么区别？
ref用于基本类型（string, number）或单个对象reactive用于复杂对象（如{ user: {}, repos: [] }）- 在模板中，
ref会自动解包，无需.value
Q3：能不能真的写爬虫？
浏览器端 不能 直接爬取任意网站（出于安全限制）。但你可以：
- 使用 GitHub API（如本例）
- 后端写爬虫（Node.js + Puppeteer），前端调用后端接口
- 使用第三方代理服务（不推荐初学者）
六、学习建议与下一步
你已经完成了第一个 Vue 实战项目！接下来建议：
✅ 巩固基础
- 精读 Vue 官方文档
- 动手实现 TodoList、天气查询等小项目
✅ 深入生态
| 工具 | 用途 | 学习优先级 |
|---|---|---|
| Vue Router | 页面跳转 | ⭐⭐⭐ |
| Pinia | 状态管理 | ⭐⭐ |
| Axios | HTTP 请求库 | ⭐⭐（替代 fetch） |
| Vite | 构建工具 | ⭐（了解即可） |
✅ 避坑指南
- 不要一开始就学 Vuex（Vue 3 推荐 Pinia）
- 不要过度追求“最新技术”，先把基础打牢
- 遇到问题先看控制台报错，90% 的问题都有明确提示
最后提醒：“爬虫”只是数据来源的一种说法，合法合规地使用公开 API 才是正道。GitHub 的开放精神值得我们尊重。
希望这篇教程能帮你迈出 Vue 项目开发的第一步。如果你觉得有用，欢迎在掘金关注我，我会持续更新更多零基础友好教程！
作者：小林，985 全栈工程师，掘金 Top 100 创作者
项目源码已上传 GitHub：github.com/yourname/vue-github-explorer（替换为你的仓库）
评论 0