零基础也能上手的 Vue.js 入门实战指南

大家好，我是团队的技术培训负责人，过去三年带过上百位应届生入门前端开发。每当看到新同学面对框架一脸迷茫的样子，我就想起自己当初学 Vue 时踩过的坑——文档看不懂、环境配不对、连“响应式”是啥都搞不清。所以今天我写这篇《零基础也能上手的 Vue.js 入门实战指南》，用最直白的语言，带你从零搭建第一个 Vue 应用，并告诉你如何把这项技能写进简历、应对面试。

---

一、Vue.js 是什么？为什么选它？

Vue.js（简称 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。你可以把它理解成“让网页动起来的工具包”。比如点击按钮弹出提示、输入框内容实时显示、页面数据自动更新——这些交互效果，用原生 JavaScript 写很麻烦，但 Vue 能帮你轻松实现。

对比其他主流框架：

• React：由 Facebook 推出，生态强大但学习曲线稍陡，适合大型项目。
• Vue：中文文档友好、语法简洁、上手快，特别适合初学者和中小型项目。

我当初学的时候，先用 Vue 做了个待办清单，三天就跑通了，成就感爆棚！

---

二、开发环境搭建（5 分钟搞定）

别被“环境搭建”吓到，现在工具已经非常傻瓜化。我们用官方推荐的 Vite 创建项目（比旧版 Vue CLI 更快）。

步骤如下：

1. 安装 Node.js（>=16.0）
   去 https://nodejs.org 下载 LTS 版本，安装后在终端运行：

   node -v  # 查看版本，如 v18.17.0
   npm -v   # 应自动安装 npm
   

2. 创建 Vue 3 项目

   npm create vue@latest my-vue-app
   cd my-vue-app
   npm install
   npm run dev
   

3. 浏览器打开 http://localhost:5173（端口可能不同），看到欢迎页面即成功！

💡 提示：如果卡在 npm install，可尝试换淘宝镜像：npm config set registry https://registry.npmmirror.com

---

三、核心概念三分钟讲清楚

Vue 的核心就三点：模板、数据、方法。我们用一个例子说明。

示例：计数器组件

<template>
  <div>
    <h1>当前计数：{{ count }}</h1>
    <button @click="increment">+1</button>
  </div>
</template>

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

// 响应式数据
const count = ref(0)

// 方法
function increment() {
  count.value++
}
</script>

关键点解释：

概念	说明	类比
{{ count }}	插值表达式，把 JS 数据插入 HTML	像 Word 里的“域代码”
ref()	创建响应式变量（值变化，页面自动更新）	Excel 单元格公式联动
@click	事件绑定，点击触发函数	按钮的“点击事件”

✅ 新手常问：“为什么用 count.value 而不是直接 count？”
因为 ref 返回的是一个包装对象，.value 才是真实值。这是 Vue 3 的设计，记住就行。

---

四、动手做：你的第一个 Todo 应用

现在我们一起做一个极简待办事项列表，涵盖增、删、显三个功能。

1. 替换 App.vue 内容

<template>
  <div style="max-width: 500px; margin: 50px auto; padding: 20px;">
    <h2>我的待办清单</h2>
    
    <!-- 输入框 + 添加按钮 -->
    <div style="margin-bottom: 20px;">
      <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入任务..." />
      <button @click="addTodo">添加</button>
    </div>

    <!-- 任务列表 -->
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)" style="margin-left: 10px; color: red;">删除</button>
      </li>
    </ul>
  </div>
</template>

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

const newTodo = ref('')
const todos = ref([])

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push(newTodo.value.trim())
    newTodo.value = ''
  }
}

function removeTodo(index) {
  todos.value.splice(index, 1)
}
</script>

2. 关键语法说明

• v-model：双向绑定，输入框内容自动同步到 newTodo
• v-for：循环渲染列表，:key 是 Vue 的性能优化要求（用 index 仅作演示，实际建议用唯一 ID）
• @keyup.enter：按下回车触发添加

🛠️ 运行 npm run dev，试试添加和删除任务！你会发现页面实时更新——这就是响应式的魅力。

---

五、新手常见问题 & 解决方案

问题	原因	解决办法
页面不更新	忘记用 ref() 或 .value	检查响应式变量是否正确声明和赋值
v-for 报错	缺少 :key	给每个循环项加唯一 key
控制台报错 “xxx is not defined”	变量未在 script 中声明	确保所有模板中用到的变量都在 <script setup> 里定义
按钮点击没反应	事件函数未定义或拼写错误	检查函数名是否一致，是否导出

⚠️ 避坑提醒：不要在模板里写复杂逻辑！比如 {{ a > b ? '大' : '小' }} 虽然能跑，但难维护。建议用计算属性（computed）或方法封装。

---

六、如何把 Vue 写进简历 & 应对面试？

很多同学学完不知道怎么展示。记住：项目 > 技术栈列表。

简历写法示例：

个人项目：简易任务管理器（Vue 3 + Vite）

• 使用 ref 和 v-for 实现任务动态增删
• 通过 v-model 实现输入双向绑定
• 本地存储支持刷新不丢失数据（可后续加）
• 代码托管于 GitHub，附链接

高频面试题准备：

1. Vue 2 和 Vue 3 有什么区别？
   → 答：Vue 3 用 Composition API（setup）、Proxy 代替 defineProperty、体积更小、支持 TypeScript 更好。

2. ref 和 reactive 有什么不同？
   → 答：ref 用于基本类型（number/string），reactive 用于对象。ref 在模板中自动解包，脚本中需 .value。

3. 你了解 React 吗？和 Vue 有什么异同？
   → 答：都用于构建 UI，但 React 用 JSX，Vue 用模板；React 状态管理靠 useState，Vue 靠响应式系统。两者生态都很强。

💬 面试技巧：即使只做过 Todo，也要讲清楚“为什么用 Vue”、“遇到了什么问题”、“如何解决”。这比背概念分高得多！

---

七、下一步学习建议

完成本教程后，你可以：

1. 加功能：给 Todo 加本地存储（localStorage）
2. 学路由：用 vue-router 做多页面应用（如首页/关于页）
3. 连后端：配合 Spring Boot 写个 REST API，前后端分离开发
4. 深入原理：了解响应式原理、虚拟 DOM、组件通信

最后送大家一句话：不要等“完全学会”才开始做项目。我带过的优秀应届生，都是边学边做、边做边改。你的第一个 Vue 项目可能只有 50 行代码，但它足以成为你简历上的第一块敲门砖。

现在，打开你的编辑器，敲下 npm create vue@latest —— 你的前端之旅，正式启程！