Vue.js 入门实战：从零搭建一个 GitHub 爬虫项目

大家好，我是一名工作五年的后端开发，但因为团队协作需要，这几年也深入接触了前端技术。Vue.js 是我用得最多的前端框架之一——它上手快、文档友好，特别适合初学者。不过，我当初学的时候可没少踩坑：装错依赖、搞不清组件通信、甚至把 v-if 和 v-show 搞混……所以今天，我想用最简单的方式，带完全零基础的朋友一起动手做一个小项目：用 Vue.js 爬取 GitHub 用户信息并展示。

别被“爬虫”吓到！这里我们不写真正的服务器爬虫（那涉及法律和反爬机制），而是调用 GitHub 官方提供的公开 API，安全又合法。这个项目不仅能帮你理解 Vue 的核心概念，还能让你体验完整开发流程。

---

一、准备工作：三分钟搭好开发环境

Vue 项目依赖 Node.js，所以我们先装它。

1. 安装 Node.js

• 访问 https://nodejs.org
• 下载 LTS 版本（长期支持版，更稳定）
• 安装时一路“下一步”即可

安装完成后，打开终端（Mac 用 Terminal，Windows 用 PowerShell 或 CMD），输入：

node -v
npm -v

如果看到版本号（比如 v18.17.0），说明安装成功！

💡 我当初第一次装 Node，结果用了最新版（Current），结果和某些包不兼容，折腾半天。记住：新手请用 LTS！

2. 创建 Vue 项目

Vue 官方提供了脚手架工具 create-vue，我们用它快速初始化项目：

npm create vue@3

然后按提示操作：

• 项目名：github-user-viewer
• 是否添加 TypeScript？No
• 是否添加 JSX 支持？No
• 是否添加路由？Yes（虽然本项目不用，但提前装上方便以后扩展）
• 是否添加 Pinia 状态管理？No
• 是否添加 ESLint / Prettier？都选 Yes

等安装完成后，进入项目并启动：

cd github-user-viewer
npm install
npm run dev

浏览器打开 http://localhost:5173，看到 Vue 的欢迎页面，就说明一切正常！

---

二、Vue 核心概念：用大白话讲清楚

很多教程一上来就讲“响应式”“虚拟 DOM”，新手容易懵。我用做饭来比喻：

• 模板（Template）：菜谱，写“放两个鸡蛋、加盐”
• 数据（Data）：食材，比如“鸡蛋=2个，盐=1勺”
• 方法（Methods）：你的操作，比如“打蛋”“炒菜”

当数据变了（比如你多加了一个蛋），Vue 自动重新“做菜”（更新页面）。

关键语法速览

语法	作用	示例
{{ }}	插值，显示数据	<p>{{ username }}</p>
v-bind 或 :	绑定属性	<img :src="avatarUrl">
v-on 或 @	绑定事件	<button @click="search">搜索</button>
v-model	双向绑定输入框	<input v-model="query">

---

三、实战：做一个 GitHub 用户信息查看器

我们的目标：用户输入 GitHub 用户名，点击搜索，页面显示头像、昵称、仓库数等信息。

步骤 1：清理默认页面

打开 src/App.vue，删掉里面所有内容，替换成：

<template>
  <div class="app">
    <h1>GitHub 用户查看器</h1>
    <div class="search-box">
      <input v-model="username" placeholder="输入 GitHub 用户名" />
      <button @click="fetchUser">搜索</button>
    </div>

    <div v-if="loading">加载中...</div>
    <div v-else-if="user">
      <img :src="user.avatar_url" :alt="user.login" />
      <h2>{{ user.name || user.login }}</h2>
      <p>公开仓库：{{ user.public_repos }}</p>
      <p>粉丝数：{{ user.followers }}</p>
    </div>
    <div v-else-if="error">
      {{ error }}
    </div>
  </div>
</template>

步骤 2：添加逻辑

在 <script setup> 标签下（就在 <template> 下面），写：

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

// 响应式变量
const username = ref('')
const user = ref(null)
const loading = ref(false)
const error = ref('')

// 获取用户数据
async function fetchUser() {
  if (!username.value.trim()) {
    error.value = '请输入用户名'
    return
  }

  loading.value = true
  error.value = ''
  user.value = null

  try {
    // 调用 GitHub API（公开接口，无需 token）
    const res = await fetch(`https://api.github.com/users/${username.value}`)
    
    if (!res.ok) {
      throw new Error('用户不存在')
    }
    
    user.value = await res.json()
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}
</script>

步骤 3：加点样式（可选）

在 <style> 标签下加点美化：

<style>
.app {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}
.search-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
input {
  flex: 1;
  padding: 8px;
  font-size: 16px;
}
button {
  padding: 8px 16px;
  background: #24292e;
  color: white;
  border: none;
  cursor: pointer;
}
img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>

保存后，回到浏览器，试试输入 octocat（GitHub 官方测试账号），就能看到效果了！

---

四、新手常见问题 & 避坑指南

❌ 问题1：fetch is not defined？

原因：你在 <script> 里写了 setup()，但没用 async/await。 解决：确保函数是 async function，且 await 在前面。

❌ 问题2：点了按钮没反应？

检查：

• 是否绑定了 @click="fetchUser"？
• 函数名是否拼写一致？
• 控制台是否有报错？（按 F12 打开开发者工具）

❌ 问题3：跨域错误？

GitHub API 允许 CORS（跨域请求），所以本地开发不会有问题。但如果部署后遇到，需要用代理（Vite 支持配置 vite.config.js 加 proxy）。

⚠️ 重要提醒：不要写真实爬虫！

很多新手以为“调用 API 就是爬虫”，其实不是。真正的爬虫是模拟浏览器去抓网页 HTML，这可能违反网站条款。我们这里用的是官方 API，属于合法使用。如果你真想学爬虫，请从 Python 的 requests + BeautifulSoup 开始，并遵守 robots.txt。

---

五、项目总结与开发心得

这个小项目虽然简单，但涵盖了 Vue 的核心流程：

1. 数据绑定：用 ref 管理状态
2. 事件处理：点击触发函数
3. 条件渲染：v-if 控制不同状态显示
4. 异步请求：用 fetch 调用 API

我当初第一次做类似功能时，总忘记把 loading 设回 false，导致转圈停不下来。后来学会用 try...catch...finally，才避免这种低级错误。

另外，善用 GitHub！你可以把这个项目推到 GitHub 上：

git init
git add .
git commit -m "feat: github user viewer"
git remote add origin https://github.com/你的用户名/github-user-viewer.git
git push -u origin main

不仅练了 Vue，还积累了开源作品。

---

六、下一步怎么学？

完成这个项目后，你可以：

1. 加功能：显示用户的最近仓库列表（调用 /users/{user}/repos）
2. 学路由：用 Vue Router 做多页面（比如“首页”和“用户详情页”）
3. 学状态管理：用 Pinia 管理全局状态
4. 部署上线：用 Vercel 或 Netlify 免费部署，分享给朋友

最后送大家一句话：编程不是记住所有语法，而是学会拆解问题。遇到 bug 别慌，读错误信息、查文档、搜关键词，90% 的问题都能解决。

希望这篇踩坑指南能帮你少走弯路。如果你照着做成功了，不妨在评论区告诉我你查的是哪个 GitHub 大神 😄