零基础入门 Vue.js 开发指南：一个纯前端“转岗未遂”者的碎碎念
上周五晚上九点半，我瘫在工位上盯着屏幕上那条刺眼的 CI 报错：“TypeError: Cannot read property 'map' of undefined”。又是因为后端接口突然改了返回结构，而我这个只会写页面的前端根本不敢动 Node 层——毕竟，我只是个纯前端出身、最近被逼着学 Node.js 做全栈的打工人。
坐标北京，每天通勤一小时，到家基本只剩半条命。但为了不被时代淘汰（以及老板画的大饼），我还是咬牙开始啃全栈。而在这一堆新概念里，Vue.js 成了我第一个真正上手的框架。不是 React？不是 Angular？今天就来聊聊，为啥我这个“零基础小白”最终选了 Vue，以及它到底香在哪。
为什么不是 React？一场“生态 vs 上手速度”的拉锯战
说真的，去年双11前我们组技术选型时，团队里吵得不可开交。老王（React 老炮）拍桌子说：“React 生态强，社区大，招聘也方便！”测试小李弱弱插嘴：“但咱们产品下周就要上线 MVP……”运维大哥直接翻白眼：“你们前端能不能别天天换框架？Nginx 配置我都配吐了。”
我默默打开 GitHub，搜了下两个项目的 star 数：
| 框架 | GitHub Stars (截至2024年中) | 上手难度 | 官方中文文档 |
|---|---|---|---|
| React | ~210k | 中高 | 有（非官方） |
| Vue | ~208k | 低 | 官方支持 |
乍看差不多，但对我这种每天下班只想躺平、没精力啃英文文档的人来说，Vue 的官方中文文档简直是救命稻草。第一次跑 npm create vue@latest，十分钟就跑起来一个带路由和状态管理的项目——React 还在教我怎么配 Webpack 和 Babel 插件呢。
而且，Vue 的模板语法对传统前端太友好了！你写过 jQuery 吗？写过原生 JS 操作 DOM 吗？那你看到 <div>{{ message }}</div> 瞬间就能理解数据绑定。React 的 JSX？第一次看到 <div>{message}</div> 我差点以为这是 PHP 混进了 JS 文件……
从“Hello World”到真·项目：我的第一个 Vue 应用
领导让我做个内部工具，展示 GitHub 上我们团队的 PR 状态。需求很简单：输入仓库名，显示最近 10 个 PR 的标题、作者、状态。
如果是以前，我可能会用原生 JS + fetch + 手动拼 HTML 字符串（别笑，很多老项目真这么干）。但现在？直接上 Vue！
第一步：创建项目（真的只要一行命令）
npm create vue@latest github-pr-tracker
一路回车，选上 TypeScript、Pinia（状态管理）、Vue Router（虽然这项目用不上，但先装着以后用）。等依赖装完，cd github-pr-tracker && npm run dev，浏览器自动弹出——一个干净的欢迎页。丝滑得让我怀疑人生。
第二步：写核心逻辑（重点来了！）
我在 src/components/PrList.vue 里写了这么一段：
<template>
<div class="pr-list">
<input v-model="repo" @keyup.enter="fetchPRs" placeholder="e.g. vuejs/core" />
<button @click="fetchPRs">查 PR</button>
<ul v-if="prs.length">
<li v-for="pr in prs" :key="pr.id" :class="pr.state">
<a :href="pr.url" target="_blank">{{ pr.title }}</a>
<span>by {{ pr.author }}</span>
</li>
</ul>
<p v-else-if="loading">Loading...</p>
<p v-else-if="error">{{ error }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const repo = ref('')
const prs = ref([])
const loading = ref(false)
const error = ref('')
async function fetchPRs() {
if (!repo.value.trim()) return
loading.value = true
error.value = ''
try {
// 注意：这里为了简化，实际要用你的 GitHub Token
const res = await fetch(`https://api.github.com/repos/${repo.value}/pulls?per_page=10`)
if (!res.ok) throw new Error('仓库不存在或 API 限流')
prs.value = (await res.json()).map(pr => ({
id: pr.id,
title: pr.title,
author: pr.user.login,
state: pr.state, // 'open' or 'closed'
url: pr.html_url
}))
} catch (err) {
error.value = err.message
prs.value = []
} finally {
loading.value = false
}
}
</script>
<style scoped>
.pr-list li.open { border-left: 4px solid #4CAF50; }
.pr-list li.closed { border-left: 4px solid #F44336; }
</style>
这段代码里藏着几个 Vue 新手友好设计：
v-model：双向绑定输入框，不用再写addEventListener('input', ...)v-for：列表渲染，key 自动防 diff 错乱<script setup>：组合式 API，逻辑集中，不用在data/methods/computed里跳来跳去scoped样式：组件样式隔离，再也不怕全局 CSS 污染
最爽的是：改完代码保存，浏览器自动刷新，连 F5 都不用按。Webpack Dev Server + HMR（热更新）让开发体验飞起。
性能优化？别慌，Vue 已经帮你兜底了
作为对性能有点强迫症的人，我一开始担心：这么多响应式数据，会不会卡？
结果测了一下：即使列表有 100 条 PR，滚动依然流畅。原来 Vue 3 的 Proxy 响应式系统比 Vue 2 的 Object.defineProperty 更高效，而且只追踪真正用到的数据。
我还顺手加了个小优化：用 v-memo 缓存静态节点（虽然这例子用不上，但学到了）：
<li v-for="pr in prs" :key="pr.id" v-memo="[pr.id]">
<!-- 内容不变时跳过 Virtual DOM diff -->
</li>
另外，Vue 的 懒加载组件 也很香：
// 路由里动态导入
{ path: '/detail', component: () => import('./views/Detail.vue') }
首屏 JS 包体积直接砍掉 30%，Lighthouse 分数蹭蹭涨。产品经理看了都说：“这次加载快多了，用户留存应该能提升！”（虽然我知道他根本不懂 Lighthouse 是啥）
那些让我想砸键盘的坑（以及怎么爬出来的）
当然，学习过程不可能一帆风顺。
坑1：异步更新时机搞不清
一开始我在 fetchPRs 后立刻操作 DOM，结果拿不到新数据。后来才知道 Vue 的响应式更新是异步批量的，得用 nextTick：
import { nextTick } from 'vue'
// ...
await nextTick()
// 此时 DOM 已更新
坑2：Props 传对象，子组件直接改导致警告
Vue 会警告“Avoid mutating a prop directly”，正确做法是用 computed 或 watch 派生本地状态：
const localValue = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
坑3：GitHub API 限流
匿名请求每小时只能 60 次，我本地调试五分钟就超了。解决方案：在 .env 里配 token（记得加到 .gitignore！）：
VITE_GITHUB_TOKEN=your_token_here
然后在代码里用 import.meta.env.VITE_GITHUB_TOKEN 获取。Vite 的环境变量机制真香！
写在最后：前端不止是切图仔，更是“用户体验的守门人”
现在这个 GitHub PR 工具已经上线两周了，每天帮团队省下至少半小时手动查 PR 的时间。测试同学甚至夸我：“这次交互做得挺顺滑啊！”（感动哭）
回头看看，选择 Vue 对我这个“零基础”转全栈的人来说，真的是个明智决定。它没有牺牲能力去换取简单，而是在保持强大功能的同时，把上手门槛压到最低。你可以在第一天写出能跑的代码，也可以在一年后用它构建复杂的企业级应用。
如果你也和我一样：
- 被 Node.js 逼着走出舒适区
- 想快速交付 MVP 应对 product owner 的 deadline
- 对“代码人生”还有点理想主义（比如希望写出优雅、可维护的代码）
那么，Vue.js 绝对值得你花一个周末试试。别怕，GitHub 上有无数开源项目可以抄（啊不，是学习），社区里也有一群和你一样边学边踩坑的小伙伴。
前端的世界很大，但迈出第一步，永远只需要一个 npm create vue@latest。
（完）
P.S. 下周打算用 Pinia + TypeScript 重构这个小工具，顺便把单元测试加上。要是你也在学 Vue，欢迎来我 GitHub 仓库提 issue 一起交流～
评论 0