零基础入门 Vue.js 开发指南

大家好，我是掘金上一位985毕业的全栈工程师，也是你们的新手前端讲师。今天我想写这篇《零基础入门 Vue.js 开发指南》，是因为我当初学前端时踩过太多坑——光是环境配置就卡了我整整三天！Vue 是目前最友好的前端框架之一，特别适合完全没接触过编程的新手。这篇教程会从零开始，一步步带你写出第一个 Vue 项目，还会提到 React 作为对比参考，并为你整理好学习资源和避坑建议。

---

一、Vue.js 是什么？能用来做什么？

简单来说，Vue.js（简称 Vue）是一个用于构建用户界面的 JavaScript 框架。你可以用它来开发网页、手机 App（通过 UniApp 或 Capacitor）、甚至桌面应用。

• 如果你见过淘宝商品页的动态切换、微信小程序的交互效果，背后很可能就有 Vue 的影子。
• 相比 React（另一个主流前端框架），Vue 的语法更直观，学习曲线更平缓，非常适合零基础入门。

📌 小贴士：Vue 和 React 都很强大，但初学者选 Vue 更容易上手。等你熟悉了前端思维，再学 React 会事半功倍。

---

二、环境准备：5 分钟搭建开发环境

别担心，现在搭建 Vue 开发环境比泡面还快！我们使用官方推荐的 Vite 工具（比老式的 Webpack 快 10 倍以上）。

步骤 1：安装 Node.js

• 访问 https://nodejs.org，下载 LTS 版本（长期支持版）
• 安装完成后，打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入：

  node -v
  npm -v
  

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

步骤 2：创建 Vue 项目

在终端中执行以下命令（一行一行复制）：

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

系统会自动打开浏览器，地址通常是 http://localhost:5173，你会看到一个欢迎页面！

💡 我当初第一次看到这个页面时激动得差点把咖啡打翻——恭喜你，已经迈出了第一步！

---

三、核心概念：用最简单的语言讲清楚

Vue 的核心思想就三个字：数据驱动。意思是：你只管改数据，页面会自动更新。

1. 响应式数据（Reactivity）

在 Vue 中，数据放在 data() 或 ref() 里，一旦改变，页面立刻更新。

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

// 声明一个响应式变量
const count = ref(0)

// 点击时 +1
function increment() {
  count.value++
}
</script>

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">点我加 1</button>
  </div>
</template>

✅ 注意：ref 变量在 JS 中要用 .value 访问，在模板中直接写 {{ count }} 即可。

2. 模板语法（Template Syntax）

• {{ }}：插值，显示数据
• v-if：条件渲染
• v-for：循环渲染列表
• @click：事件绑定（等价于 v-on:click）

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  
  <p v-if="isVisible">我是可见的！</p>
</template>

3. 组件化（Component）

Vue 把页面拆成一个个“积木”（组件），比如 Header、Footer、ProductCard。

每个 .vue 文件就是一个组件，包含三部分：

• <template>：HTML 结构
• <script>：JavaScript 逻辑
• <style>：CSS 样式

---

四、实战项目：做一个待办事项（To-Do List）

现在我们动手做一个超简单的待办清单，巩固所学知识。

第 1 步：清理默认文件

删除 src/components/HelloWorld.vue，清空 App.vue 内容。

第 2 步：编写 App.vue

<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 = ''
  }
}

function toggleDone(todo) {
  todo.done = !todo.done
}

function removeTodo(id) {
  todos.value = todos.value.filter(t => t.id !== id)
}
</script>

<template>
  <div style="max-width: 600px; margin: 40px auto; padding: 20px;">
    <h1>我的待办清单</h1>
    
    <!-- 输入框 + 添加按钮 -->
    <div style="margin-bottom: 20px;">
      <input 
        v-model="newTodo" 
        @keyup.enter="addTodo"
        placeholder="输入任务，按回车添加"
        style="padding: 8px; width: 70%;"
      />
      <button @click="addTodo" style="padding: 8px 12px;">添加</button>
    </div>

    <!-- 任务列表 -->
    <ul>
      <li 
        v-for="todo in todos" 
        :key="todo.id"
        style="padding: 10px; border-bottom: 1px solid #eee;"
      >
        <input 
          type="checkbox" 
          :checked="todo.done" 
          @change="toggleDone(todo)"
        />
        <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
          {{ todo.text }}
        </span>
        <button 
          @click="removeTodo(todo.id)" 
          style="float: right; color: red;"
        >
          删除
        </button>
      </li>
    </ul>
  </div>
</template>

第 3 步：运行看看！

保存后，浏览器会自动刷新。试试添加、勾选、删除任务——是不是超有成就感？

🔒 安全提示：这个项目只在本地运行，不涉及网络请求，所以没有安全风险。但未来做真实项目时，记得对用户输入做校验，防止 XSS 攻击！

---

五、新手常见问题解答（FAQ）

问题	解决方案
页面没更新？	检查是否用了 ref 但忘了 .value，或在模板中错误地写了 .value
@click 不生效？	确保函数在 <script setup> 中正确声明，且没有拼写错误
为什么要有 :key？	Vue 用 key 识别列表中的每一项，避免复用错误导致 UI 异常
能和 React 一起用吗？	不能！一个项目只能用一个框架。建议先精通 Vue 再学 React

❗ 我当初就因为忘记写 :key，导致列表删除时错乱，debug 了两个小时……

---

六、学习建议与下一步路径

推荐学习资源

• 官方文档（中文）：https://cn.vuejs.org —— 最权威、最清晰
• 免费视频教程：B站搜索 “Vue3 入门到实战”（推荐 coderwhy 的系列）
• 实战项目库：GitHub 上搜 “vue3-todo-list” 看别人怎么写

下一步学什么？

1. 组件通信：父传子（props）、子传父（emit）
2. 路由管理：用 Vue Router 做多页面应用
3. 状态管理：用 Pinia 管理全局数据
4. 对接 API：用 fetch 或 axios 获取后端数据

避坑指南

• ❌ 不要一上来就学 Vuex（已被 Pinia 取代）
• ❌ 不要同时学 Vue 2 和 Vue 3（直接学 Vue 3！）
• ✅ 多写代码！哪怕抄一遍示例，也比只看不动手强 100 倍

---

结语

恭喜你，已经完成了 Vue.js 的第一次亲密接触！这个小小的待办事项项目，就是你迈向全栈工程师的第一块基石。

记住：所有大神都曾是小白。我当初连 npm 是啥都不知道，但现在能带团队做千万级项目。只要你坚持动手、善用资源、不怕犯错，前端之路一定会越走越宽。

如果你觉得这篇教程对你有帮助，欢迎在评论区留言你的第一个 Vue 项目截图！也别忘了收藏本文，下次卡壳时回来翻翻。

下期预告：《用 Vue + Node.js 搭建你的第一个全栈项目》——敬请期待！

作者：掘金 @全栈小张｜985 软件工程毕业｜专注零基础友好型技术分享