零基础入门 Vue.js 开发指南：从前端小白到能写简历项目的实战路线
大家好！我是你们的老朋友，一个在大厂干了3年前端开发、业余时间在B站做技术UP主的程序员。最近收到很多私信问我：“完全没接触过前端，怎么开始学 Vue？”“学完能去求职吗？”“要不要先学原生 JavaScript？”
我当初学的时候也是一头雾水——文档看不懂、术语满天飞、连 npm 是啥都不知道。但别怕！今天这篇教程，就是为你量身打造的零基础 Vue.js 入门指南。我会用最简单的语言、最真实的案例，带你从安装环境到做出第一个可展示在 GitHub 上的小项目。更重要的是，这个项目你完全可以写进简历，作为前端求职的敲门砖！
一、Vue.js 是什么？为什么值得学？
简单说：Vue.js 是一个用于构建用户界面的前端框架。
- “前端”指的是你在浏览器里看到的网页部分（比如按钮、表单、列表）。
- Vue 的核心思想是：数据变了，页面自动更新，你不用手动操作 DOM（这点比原生 JS 简单太多了！）。
- 它上手快、生态成熟、国内大厂（阿里、腾讯、字节）都在用，是求职前端岗位的必备技能之一。
💡 小贴士：如果你目标是找工作，Vue + 一个 GitHub 项目 + 基础 HTML/CSS/JS，已经能投不少初级岗位了！
二、环境准备：5 分钟搭好开发环境
我们不需要复杂的配置！只需要三样东西：
| 工具 | 作用 | 安装方式 |
|---|---|---|
| Node.js | 运行 JavaScript 的环境 | 官网下载 LTS 版本 |
| VS Code | 代码编辑器（免费好用） | 官网下载 |
| 浏览器 | 查看效果（Chrome 最佳） | 已安装 |
步骤 1：验证 Node.js 是否安装成功
打开终端（Mac 用 Terminal，Windows 用 PowerShell 或 CMD），输入：
node -v
npm -v
如果显示版本号（比如 v18.17.0），说明安装成功！
步骤 2：创建你的第一个 Vue 项目
Vue 官方提供了脚手架工具 Vite，超级快！在终端执行：
npm create vue@latest my-vue-app
然后一路回车（全部选默认即可），最后进入项目并启动：
cd my-vue-app
npm install
npm run dev
看到终端输出类似 Local: http://localhost:5173/，复制链接到浏览器打开——恭喜！你已经跑起了 Vue 项目！
🚨 新手常见问题：如果卡在
npm install，可能是网络问题，可以尝试换淘宝镜像：npm config set registry https://registry.npmmirror.co
三、核心概念：用“购物清单”理解 Vue
我们不用死记术语，直接通过一个小例子理解三大核心：
场景：做一个“待办事项”（To-Do List）
1. 响应式数据（Reactivity）
数据变了，页面自动更新。
<!-- App.vue -->
<template>
<div>
<h1>我的购物清单</h1>
<p>还剩 {{ todos.length }} 项未买</p>
</div>
</template>
<script setup>
const todos = [
{ id: 1, text: '苹果', done: false },
{ id: 2, text: '牛奶', done: true }
]
</script>
✅ 注意：
todos是一个数组，模板里用双大括号{{ }}显示它的长度。如果后面代码修改了todos，页面数字会自动变！
2. 指令（Directives）
以 v- 开头的特殊属性，用来操作 DOM。
<template>
<ul>
<li v-for="item in todos" :key="item.id">
{{ item.text }}
</li>
</ul>
</template>
v-for：循环渲染列表:key：给每个元素一个唯一 ID（Vue 需要它来高效更新）
3. 事件处理（Event Handling）
用户点击按钮时触发逻辑。
<template>
<button @click="addTodo">添加香蕉</button>
</template>
<script setup>
import { ref } from 'vue'
const todos = ref([
{ id: 1, text: '苹果', done: false }
])
function addTodo() {
todos.value.push({ id: Date.now(), text: '香蕉', done: false })
}
</script>
@click是v-on:click的简写ref()让变量变成“响应式”的（这是 Vue 3 的新写法，比老版本更简洁！）
💡 我当初学的时候总忘记
.value，记住：在 script 里读写 ref 变量要加.value，在模板里不用！
四、实战：完成一个完整的待办事项 App
现在，我们把上面的知识点串起来，做一个可交互的 To-Do List。
步骤 1：替换 App.vue 内容
<template>
<div style="padding: 20px; max-width: 400px; margin: 0 auto;">
<h1>🛒 购物清单</h1>
<!-- 输入框 + 按钮 -->
<div style="margin-bottom: 16px;">
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入商品..." />
<button @click="addTodo" style="margin-left: 8px;">添加</button>
</div>
<!-- 列表 -->
<ul>
<li v-for="todo in todos" :key="todo.id" style="margin: 8px 0;">
<input type="checkbox" v-model="todo.done" />
<span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
{{ todo.text }}
</span>
</li>
</ul>
<p>共 {{ todos.length }} 项，已完成 {{ completedCount }}</p>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const newTodo = ref('')
const todos = ref([])
// 计算属性：自动计算已完成数量
const completedCount = computed(() => {
return todos.value.filter(t => t.done).length
})
function addTodo() {
if (newTodo.value.trim()) {
todos.value.push({
id: Date.now(),
text: newTodo.value.trim(),
done: false
})
newTodo.value = '' // 清空输入框
}
}
</script>
步骤 2：运行看看效果！
- 在输入框打字，按回车或点“添加”，商品就进列表了
- 勾选复选框，文字会变删除线
- 底部实时显示总数和完成数
✅ 你刚刚用到了：
ref、computed、v-model、v-for、@click、@keyup—— 这些就是 Vue 最核心的 API！
五、新手常见问题解答
Q1：一定要学原生 JavaScript 再学 Vue 吗？
不用！ 但至少要会：
- 变量、函数、数组（
.push,.filter） - 对象（
{}） - ES6 语法（
const、箭头函数） 建议边学 Vue 边补 JS 基础，效率更高。
Q2：Vue 2 和 Vue 3 该学哪个？
直接学 Vue 3！ 它是最新版，语法更简洁（如 <script setup>），未来所有新项目都用它。
Q3：项目怎么放到 GitHub？
- 注册 GitHub 账号
- 在项目根目录执行：
git init git add . git commit -m "first commit" git branch -M main git remote add origin https://github.com/你的用户名/项目名.git git push -u origin main - 把仓库链接放进简历，面试官一定会点开看！
六、下一步学习建议
你已经迈出了关键一步！接下来：
- 深化基础：学习组件通信（props / emit）、路由（Vue Router）、状态管理（Pinia）
- 做更多项目：比如天气查询、博客系统、简易电商首页
- 部署上线：用 Vercel 或 Netlify 免费部署，让全世界都能访问你的作品
- 刷题+面试：LeetCode 简单题 + 整理 Vue 面试题（生命周期、响应式原理等）
🌟 最后送你一句话：前端不难，难的是开始。而你，已经开始了。
作者简介：我是 B 站 UP 主「代码小工」，专注前端实战教学。关注我，下期带你用 Vue + Firebase 做一个实时聊天室，还能部署到线上！记得点赞收藏，求职路上不迷路 💪
评论 0