零基础也能上手：Vue.js 开发从入门到第一个小项目

大家好，我是一名开源项目的维护者，也带过不少前端新人。经常有刚入行的朋友问我：“Vue 和 React 到底有什么区别？我该学哪个？”“学 Vue 要不要先会爬虫？”甚至有人拿着 Vue 的面试题来问基础语法……这些经历让我意识到，很多初学者其实最缺的不是资料，而是一条清晰、无干扰的学习路径。

所以今天，我决定写一篇完全零基础也能看懂的 Vue.js 入门指南。不谈 React 对比（虽然会提一嘴），不搞爬虫（那是后端/数据的事），也不堆砌面试题——我们专注一件事：用最简单的语言，带你写出第一个能跑的 Vue 应用。

---

什么是 Vue.js？它能做什么？

Vue.js（读作 /vjuː/，类似 “view”）是一个用于构建用户界面的渐进式 JavaScript 框架。简单说，它帮你更轻松地开发网页的“动态部分”。

比如：

• 点击按钮，文字变颜色
• 输入框打字，下面实时显示你输入的内容
• 从服务器加载商品列表并展示出来

这些功能，用原生 JavaScript 写起来又啰嗦又容易出错。而 Vue 提供了一套简洁的语法，让你像搭积木一样组合页面逻辑。

我当初学的时候，以为框架很神秘。其实它就是一套“工具包”，帮你把重复劳动自动化了。

---

第一步：搭建开发环境（5 分钟搞定）

别被“环境搭建”吓到，现在 Vue 的起步比泡面还快！

所需工具

• 一个现代浏览器（Chrome / Edge / Firefox）
• 代码编辑器（推荐 VS Code，免费）
• Node.js（用于运行本地开发服务器）

安装步骤

1. 安装 Node.js
   访问 https://nodejs.org，下载 LTS 版本（长期支持版），一路“下一步”安装即可。

2. 验证安装
   打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入：

   node -v
   npm -v
   

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

3. 创建 Vue 项目（使用官方脚手架）
   在终端中执行：

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

   系统会问几个问题，全部按回车用默认选项就行。

4. 进入项目并启动

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

   成功后会看到一行绿色提示，比如 http://localhost:5173/。复制这个地址到浏览器打开，你会看到 Vue 的欢迎页面！

✅ 避坑提示：如果卡在 npm install，可能是网络问题。可以尝试换国内镜像（如 npm config set registry https://registry.npmmirror.com）。

---

核心概念：用“说话”的方式理解 Vue

Vue 的核心思想就两个字：响应式。

想象你有一个变量 message = "Hello"，页面上有个 <div> 显示它。当你把 message 改成 "Hi"，页面自动更新——这就是响应式。

下面我们拆解三个关键概念：

1. 模板语法（Template Syntax）

用双大括号 {{ }} 把数据“插”到 HTML 里：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
let message = "你好，Vue！"
</script>

2. 响应式数据（Reactivity）

用 ref() 包裹变量，Vue 才能“监听”它的变化：

<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>

💡 @click 是 Vue 的指令，等价于 onclick，但更简洁。

3. 组件（Component）

组件就像乐高积木。你可以把一个功能（比如计数器）封装成独立文件，哪里需要就“插入”哪里。

新建 Counter.vue：

<!-- Counter.vue -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
function add() { count.value++ }
</script>

<template>
  <div>
    <p>计数：{{ count }}</p>
    <button @click="add">加一</button>
  </div>
</template>

在主页面使用它：

<!-- App.vue -->
<script setup>
import Counter from './components/Counter.vue'
</script>

<template>
  <Counter />
  <Counter /> <!-- 可以多次使用！ -->
</template>

---

实战项目：做一个待办事项（Todo List）

现在，让我们动手做一个经典小项目——待办清单。它包含：

• 添加新任务
• 标记任务完成
• 删除任务

步骤 1：准备数据结构

每个任务应该有：

• id：唯一标识
• text：任务内容
• done：是否完成（布尔值）

步骤 2：编写代码

替换 App.vue 的内容为以下代码：

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

// 初始化任务列表
const todos = ref([
  { id: 1, text: '学习 Vue 基础', done: true },
  { id: 2, text: '做第一个项目', done: false }
])

// 新任务输入框的内容
const newTodo = ref('')

// 添加任务
function addTodo() {
  if (newTodo.value.trim() === '') return
  todos.value.push({
    id: Date.now(), // 用时间戳当 ID（简单起见）
    text: newTodo.value,
    done: false
  })
  newTodo.value = '' // 清空输入框
}

// 删除任务
function removeTodo(id) {
  todos.value = todos.value.filter(todo => todo.id !== id)
}
</script>

<template>
  <div style="max-width: 600px; margin: 2rem auto; padding: 0 1rem;">
    <h1>我的待办事项</h1>
    
    <!-- 输入框 + 按钮 -->
    <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
      <input 
        v-model="newTodo" 
        @keyup.enter="addTodo"
        placeholder="输入新任务..."
        style="flex: 1; padding: 0.5rem;"
      >
      <button @click="addTodo" style="padding: 0.5rem 1rem;">添加</button>
    </div>

    <!-- 任务列表 -->
    <ul style="list-style: none; padding: 0;">
      <li 
        v-for="todo in todos" 
        :key="todo.id"
        style="display: flex; align-items: center; padding: 0.5rem; border-bottom: 1px solid #eee;"
      >
        <input 
          type="checkbox" 
          v-model="todo.done"
          style="margin-right: 0.5rem;"
        >
        <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
          {{ todo.text }}
        </span>
        <button 
          @click="removeTodo(todo.id)"
          style="margin-left: auto; color: red; background: none; border: none; cursor: pointer;"
        >
          删除
        </button>
      </li>
    </ul>
  </div>
</template>

步骤 3：运行看看！

保存后，浏览器会自动刷新。试试：

• 输入新任务，按回车或点“添加”
• 勾选任务，文字会变删除线
• 点“删除”移除任务

✨ 恭喜你！ 这是你用 Vue 写的第一个完整交互应用。

---

新手常见问题 & 解决方案

问题	原因	解决方法
页面没更新	忘记用 ref() 包裹变量	所有要响应的数据都用 ref() 或 reactive()
v-model 不生效	绑定的是普通变量而非响应式对象	确保 newTodo = ref('')
组件不显示	忘记在 <template> 中使用	检查是否写了 <MyComponent />
控制台报错 xxx is not defined	忘记导入函数或变量	检查 import 语句

我当初学的时候，经常忘记 .value，导致数据变了但页面不动。后来我养成习惯：只要用 ref，就默念“取值要加 .value”。

---

关于 React、爬虫和面试题的澄清

很多初学者会被这些关键词干扰，这里统一说明：

Vue vs React？

• 两者都是主流前端框架，功能上高度相似。
• Vue 学习曲线更平缓，适合零基础；React 生态更大，适合长期发展。
• 建议：先精通一个，再看另一个。不要一开始就对比！

需要学爬虫吗？

• 完全不需要！ 爬虫是 Python/Node.js 后端技术，和前端框架无关。
• Vue 用来做用户界面，不是抓取网页数据。

面试题怎么办？

• 初期别死磕面试题！先能做出东西，理解原理自然能答。
• 推荐后期刷题时参考 Vue 官方文档的深入指南。

---

下一步学习资源推荐

学完这篇，你已经跨过了最难的门槛。接下来：

官方文档（必看！）

• Vue 3 中文文档
• 特别关注「深入组件」和「状态管理」章节

免费视频教程

• B站搜索 “Vue3 入门实战”（推荐“技术胖”或“程序员十三”的系列）
• YouTube: “Vue School” 官方频道

实践项目建议

1. 天气查询应用（调用公开 API）
2. 简易博客系统（用 localStorage 存数据）
3. 仿写一个 GitHub 用户信息页

加入社区

• GitHub 上找小型 Vue 开源项目（标有 good first issue 的）
• 参与讨论，提 PR，你会进步飞快

---

最后的话

编程不是背诵，而是动手构建。你今天写的这个 Todo List，可能很简单，但它包含了 Vue 的核心思想：数据驱动视图。

记住：每一个高手，都曾卡在 ref 和 .value 上。别怕犯错，你的每一次调试，都在重塑大脑的编程神经通路。

如果你跟着教程做出了第一个 Vue 应用，不妨在评论区留言“Done!” —— 这会是你前端之路的重要里程碑。

加油，未来的开发者！🚀