零基础也能学会的 Vue.js 入门指南

大家好，我是小林，一名在大厂干了3年前端开发的工程师，业余时间也在 B站做技术分享。经常有小伙伴私信问我：“Vue 到底难不难？零基础能不能学？”说实话，我当初学的时候也是一头雾水——看不懂双向绑定、搞不清组件通信，甚至连 npm 是啥都不知道。但今天我想说：Vue 是前端初学者最友好的起点之一。

这篇教程，就是为完全没碰过代码的新手准备的。我会用最直白的语言、最实用的例子，带你从零开始写出第一个 Vue 项目。无论你是想转行、做副业，还是单纯对“产品”背后的前端技术感兴趣，这篇文章都能帮你迈出第一步。

---

为什么选 Vue？三大主流前端框架怎么选？

在动手之前，先聊聊“技术选型”。目前前端主流的三大框架是 React、Angular 和 Vue。它们都能用来开发复杂的 Web 应用（比如后台管理系统、电商平台、社交产品等），但对新手来说，体验差别很大：

框架	学习曲线	文档友好度	社区活跃度	适合人群
React	中高	好	极高	有 JS 基础、追求灵活
Angular	高	一般	中	企业级大型项目
Vue	低	极好	高	零基础、快速上手

我当初之所以选择 Vue 入门，就是因为它的模板语法接近 HTML，写起来像搭积木，而且官方文档堪称“教科书级别”。如果你的目标是快速做出一个能跑的项目，Vue 绝对是首选。

---

第一步：搭建你的开发环境

别担心！现在搭建 Vue 开发环境比泡方便面还简单。你只需要两样东西：

1. Node.js（提供运行环境）
2. VS Code（代码编辑器）

安装步骤（Windows / Mac 通用）

1. 访问 https://nodejs.org，下载 LTS 版本（长期支持版，更稳定）

2. 安装时一路“下一步”即可

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

   node -v
   npm -v
   

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

4. 安装 VS Code：https://code.visualstudio.com

💡 小贴士：不用装任何“Vue 插件”或“脚手架”！我们用官方推荐的 Vite 来创建项目，它快得飞起。

创建你的第一个 Vue 项目

在终端中执行以下命令：

npm create vue@latest my-first-vue-app

然后按提示操作：

• 项目名：直接回车（默认就是 my-first-vue-app）
• 是否添加 TypeScript？→ No
• 是否添加 JSX 支持？→ No
• 是否添加路由？→ No
• 是否添加 Pinia 状态管理？→ No
• 是否添加 ESLint？→ Yes
• 是否添加 Prettier？→ Yes

完成后进入项目并启动：

cd my-first-vue-app
npm install
npm run dev

浏览器会自动打开 http://localhost:5173，看到 Vue 的欢迎页面就说明成功了！

---

核心概念：用生活例子理解 Vue

Vue 的核心思想就两个字：响应式。什么意思？举个栗子：

你点了一份外卖（数据），页面显示“预计30分钟送达”。30分钟后，页面自动变成“已送达”——不用你手动刷新，数据变了，页面自动更新。

这就是 Vue 的魔力。下面我们拆解三个关键概念：

1. 模板语法：{{ }} 是“插值”

就像填空题，把变量塞进 HTML 里：

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<script setup>
const name = '小明'
</script>

页面会显示：Hello, 小明!

2. 响应式数据：用 ref 包裹

普通变量不会自动更新，必须用 ref 包一下：

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

const count = ref(0)

function increment() {
  count.value++ // 注意：要加 .value
}
</script>

<template>
  <p>点击了 {{ count }} 次</p>
  <button @click="increment">+1</button>
</template>

每次点按钮，数字自动变！这就是“响应式”。

3. 事件绑定：@click 监听点击

@ 是 Vue 的语法糖，等价于 v-on:click。你还可以监听 @input、@submit 等。

---

实战：做一个“待办事项”小产品

光看不练假把式。我们现在用上面的知识，做一个超简单的 Todo List。这个小项目虽然简单，但包含了真实产品开发的核心流程。

步骤 1：清理默认代码

打开 src/App.vue，替换成：

<template>
  <div class="todo-app">
    <h1>我的待办清单</h1>
    <!-- 这里写我们的功能 -->
  </div>
</template>

<script setup>
// 所有逻辑写在这里
</script>

<style>
.todo-app {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
}
</style>

步骤 2：添加输入框和按钮

<template>
  <div class="todo-app">
    <h1>我的待办清单</h1>
    
    <div class="input-area">
      <input v-model="newTodo" placeholder="输入新任务..." />
      <button @click="addTodo">添加</button>
    </div>
  </div>
</template>

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

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

function addTodo() {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      done: false
    })
    newTodo.value = '' // 清空输入框
  }
}
</script>

这里用了 v-model，它是 Vue 的“双向绑定”魔法——输入框内容变了，newTodo 自动更新；反之亦然。

步骤 3：显示任务列表

在 <div class="input-area"> 下面加：

<ul class="todo-list">
  <li v-for="todo in todos" :key="todo.id">
    <input type="checkbox" v-model="todo.done" />
    <span :class="{ done: todo.done }">{{ todo.text }}</span>
  </li>
</ul>

再加点样式：

.todo-list li {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.done {
  text-decoration: line-through;
  color: #999;
}

最终效果

• 输入文字 → 点“添加” → 出现在列表
• 勾选复选框 → 文字变灰+删除线

你看，一个具备完整交互的小“产品”就诞生了！虽然简单，但它已经是一个可运行的前端项目。

---

新手常踩的坑 & 解决方案

❌ 问题1：ref 变量怎么老要写 .value？

原因：ref 返回的是一个“包装对象”，内部用 .value 存真实值。
解决：在 <template> 里不用写 .value（Vue 自动 unwrap），但在 <script> 里必须写！

❌ 问题2：页面没更新？数据明明改了！

原因：你可能直接修改了数组/对象的某个属性，比如 todos[0].done = true。
解决：Vue 3 能监听这种操作，但保险起见建议用 reactive 或确保用 ref 包裹整个对象。

❌ 问题3：v-for 忘记写 :key

后果：列表更新时可能出现错乱。
解决：永远给 v-for 加唯一 key，比如 :key="item.id"。

---

下一步学什么？我的学习路线建议

恭喜你完成了第一个 Vue 项目！但这只是开始。如果你想继续深入，我建议按这个顺序走：

1. 巩固基础：学 computed（计算属性）、watch（监听器）、生命周期
2. 组件化：把 Todo 拆成 <TodoInput /> 和 <TodoList /> 两个组件
3. 路由：用 Vue Router 实现多页面跳转（比如“全部”/“已完成”切换）
4. 状态管理：用 Pinia 管理跨组件数据
5. 实战项目：仿写一个豆瓣电影页、天气应用、或者个人博客

📌 我的 B 站频道每周更新 Vue 实战教程，从零到上线全流程都有。关注后回复“入门资料”，还能领我整理的《Vue 学习避坑手册》。

---

写在最后

前端开发不是天才的专利，而是一步步搭建的过程。我当初也是从“Hello World”开始，慢慢做出了公司里的核心产品。每个大神，都曾是个连 npm 都打错的新手。

Vue 的魅力在于：它让你快速获得正反馈。今天你写的几行代码，明天就能变成用户手中的产品。这种“创造感”，正是技术最有意思的地方。

所以，别犹豫了——打开终端，敲下那行 npm create vue@latest，你的前端之旅，现在开始！