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

大家好，我是小林，一名 211 高校计算机专业的研二学生。平时喜欢写技术博客，也经常在社区里帮新人解答问题。最近有不少刚入门前端的同学问我：“Vue 到底该怎么学？网上教程太多反而不知道从哪开始。”

我当初学 Vue 的时候，也是从零开始，踩过不少坑——比如装错 Node 版本、看不懂响应式原理、组件传值搞混…… 所以今天，我想写一篇真正“新手友好”的 Vue 入门指南，不讲复杂理论，只带你动手做出第一个能跑起来的页面。

顺便提一句，你可能会在文章里看到两个词：RAG 和 Devin。别担心，它们不是 Vue 的知识点！

• RAG（Retrieval-Augmented Generation） 是一种结合检索和生成的大模型技术，常用于智能问答系统。
• Devin 是 Cognition Labs 推出的“首个 AI 软件工程师”，能独立写代码、调试、部署。

虽然它们很火，但和 Vue 入门完全无关！我提它们，只是想告诉你：现在 AI 工具很多，但扎实的基础依然重要。别指望 Devin 替你学 Vue，不如自己动手敲代码！

---

第一步：Vue.js 是什么？能做什么？

简单说，Vue.js 是一个用来做网页的 JavaScript 框架。

你打开的很多现代网站（比如电商、后台管理系统、社交平台），页面内容会“动态变化”——点个按钮弹出窗口、输入框实时显示字数、列表自动刷新……这些功能，用原生 HTML+CSS+JS 写起来很麻烦，但用 Vue 就特别轻松。

Vue 的核心思想是：数据驱动视图。
也就是说，你只需要关心“数据是什么”，页面会自动根据数据变化而更新，不用手动操作 DOM（比如 document.getElementById）。

举个例子：

<!-- 原生 JS：要手动改 DOM -->
<div id="count">0</div>
<button onclick="update()">+1</button>

<script>
  let num = 0;
  function update() {
    num++;
    document.getElementById('count').innerText = num; // 手动更新
  }
</script>

用 Vue 写：

<div id="app">
  <p>{{ count }}</p>
  <button @click="count++">+1</button>
</div>

<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return { count: 0 };
    }
  }).mount('#app');
</script>

是不是清爽多了？{{ count }} 自动显示数据，点击按钮直接改 count，页面立刻更新！

---

环境准备：5 分钟搭好开发环境

别被“环境搭建”吓到，其实就三步：

1. 安装 Node.js

Vue 需要 Node.js 来运行开发工具。

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

安装完，在终端（Mac/Linux 用 Terminal，Windows 用 CMD 或 PowerShell）输入：

node -v
npm -v

如果显示版本号（如 v18.17.0），说明装好了！

💡 新手提示：不要用太新的 Node 版本（比如 20+），有些 Vue 工具可能不兼容。18.x 是最稳妥的选择。

2. 创建 Vue 项目

我们用官方脚手架 Vite（超快！），它比老工具 Webpack 快 10 倍以上。

在终端执行：

npm create vue@latest my-vue-app

然后按提示操作：

• ✔ Project name: 直接回车（用默认名）
• ✔ Add TypeScript? → No（新手先用 JS）
• ✔ Add JSX Support? → No
• ✔ Add Vue Router? → No（后面再学）
• ✔ Add Pinia? → No
• ✔ Add Vitest? → No
• ✔ Add ESLint? → Yes（帮你检查代码错误）
• ✔ Add Prettier? → Yes（自动格式化代码）

完成后进入项目目录并启动：

cd my-vue-app
npm install    # 安装依赖
npm run dev    # 启动开发服务器

看到类似这样的提示：

  ➜  Local:   http://localhost:5173/

打开浏览器访问这个地址，就能看到 Vue 的欢迎页面！

---

核心概念：3 个必须懂的知识点

1. 响应式数据（Reactivity）

这是 Vue 的灵魂！你在 data() 里定义的数据，一旦改变，页面自动更新。

// src/App.vue
<script setup>
import { ref } from 'vue';

const message = ref('Hello Vue!'); // ref 是响应式包裹器
</script>

<template>
  <h1>{{ message }}</h1>
  <button @click="message = 'Changed!'">点我变文字</button>
</template>

点击按钮，message 变了，<h1> 里的内容立刻跟着变！

🔍 小知识：ref 是 Vue 3 的新 API，比 Vue 2 的 data() 更简洁。我们这篇教程全用 Vue 3 + <script setup> 语法。

2. 指令（Directives）

指令是带 v- 前缀的特殊属性，用来“控制 DOM 行为”。

常用指令：

指令	作用	示例
v-if	条件渲染	<div v-if="show">显示</div>
v-for	循环列表	<li v-for="item in items" :key="item.id">{{ item.name }}</li>
v-model	双向绑定	<input v-model="text">（输入框和变量同步）
@click	绑定事件	<button @click="handleClick">点击</button>

3. 组件（Components）

组件就是“可复用的 UI 模块”。比如一个按钮、一个卡片、一个导航栏，都可以做成组件。

新建文件 src/components/Hello.vue：

<template>
  <div class="hello-box">
    <p>来自子组件的消息：{{ msg }}</p>
  </div>
</template>

<script setup>
defineProps(['msg']); // 接收父组件传来的数据
</script>

<style scoped>
.hello-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}
</style>

在 App.vue 中使用它：

<script setup>
import Hello from './components/Hello.vue';
import { ref } from 'vue';

const parentMsg = ref('爸爸传给你的消息！');
</script>

<template>
  <Hello :msg="parentMsg" />
</template>

看！parentMsg 通过 :msg 传给了子组件。这就是 props 传值，父子通信的基础。

---

实战：做一个简单的待办事项（Todo List）

现在，我们用上面的知识做一个小项目，巩固所学！

步骤 1：清理 App.vue

删掉默认内容，保留基本结构：

<script setup>
// 我们在这里写逻辑
</script>

<template>
  <!-- 页面结构放这里 -->
</template>

步骤 2：定义数据和方法

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 = ''; // 清空输入框
  }
}

function toggleDone(id) {
  const todo = todos.value.find(t => t.id === id);
  if (todo) todo.done = !todo.done;
}

function removeTodo(id) {
  todos.value = todos.value.filter(t => t.id !== id);
}

步骤 3：编写模板

<template>
  <div style="max-width: 500px; margin: 40px auto; padding: 20px;">
    <h1>我的待办事项</h1>
    
    <!-- 添加新任务 -->
    <div style="display: flex; gap: 10px; margin-bottom: 20px;">
      <input 
        v-model="newTodo" 
        placeholder="输入任务..." 
        style="flex: 1; padding: 8px;"
        @keyup.enter="addTodo"
      >
      <button @click="addTodo" style="padding: 8px 16px;">添加</button>
    </div>

    <!-- 任务列表 -->
    <ul style="list-style: none; padding: 0;">
      <li 
        v-for="todo in todos" 
        :key="todo.id"
        style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #eee;"
      >
        <span 
          :style="{ textDecoration: todo.done ? 'line-through' : 'none' }"
          @click="toggleDone(todo.id)"
        >
          {{ todo.text }}
        </span>
        <button @click="removeTodo(todo.id)" style="color: red;">×</button>
      </li>
    </ul>

    <!-- 统计 -->
    <p>共 {{ todos.length }} 项，已完成 {{ todos.filter(t => t.done).length }} 项</p>
  </div>
</template>

步骤 4：运行看看！

保存文件，回到浏览器，一个完整的 Todo List 就跑起来了！

• 输入文字，按回车或点“添加”，任务就进列表
• 点击任务文字，可以标记完成（加删除线）
• 点 × 号删除任务
• 底部自动统计数量

恭喜你！你已经掌握了 Vue 的核心用法。

---

新手常见问题解答

Q1：为什么我的页面没更新？数据明明改了！

检查是否用了 ref。普通变量不会触发响应式更新！

// ❌ 错误：count 不是响应式的
let count = 0;
function inc() { count++; }

// ✅ 正确
const count = ref(0);
function inc() { count.value++; } // 注意 .value！

Q2：v-for 为什么要加 :key？

:key 帮助 Vue 识别每个元素的身份，避免列表更新时渲染错乱。务必用唯一 ID，不要用数组索引！

<!-- ❌ 不推荐 -->
<li v-for="(item, index) in list" :key="index">...</li>

<!-- ✅ 推荐 -->
<li v-for="item in list" :key="item.id">...</li>

Q3：组件之间怎么传值？

• 父 → 子：用 props
• 子 → 父：用 emit 事件
• 兄弟组件 or 复杂场景：后面学 Pinia（状态管理）

Q4：要不要学 TypeScript？

建议等 Vue 基础熟练后再加 TS。初期用 JS 更专注逻辑。

---

下一步学习建议

你已经迈出了关键一步！接下来可以：

1. 深入组件通信：学习 $emit、provide/inject
2. 路由管理：用 Vue Router 做多页面应用（比如首页、关于页）
3. 状态管理：用 Pinia 管理全局数据（替代 Vuex）
4. 实战项目：仿写一个天气应用、记账本、博客前台
5. 部署上线：用 Vercel 或 Netlify 免费部署你的 Vue 项目

📌 避坑指南：

• 不要一上来就学 Vue 2！现在主流是 Vue 3。
• 不要死磕源码！先会用，再理解原理。
• 遇到报错，仔细读错误信息，90% 的问题靠它就能解决。

---

最后说一句：编程没有捷径，但有方法。每天写 20 行代码，坚持一个月，你会感谢自己。

如果你觉得这篇教程对你有帮助，欢迎分享给正在学 Vue 的朋友。有问题也可以在评论区留言，我会尽力解答！

加油，未来的前端工程师！🚀