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

大家好，我是一名开源项目的维护者，也长期活跃在前端技术社区。这几年我写过不少技术文档，也带过很多刚入门的新手开发者。我当初学的时候，也曾被各种框架、工具链搞得晕头转向——尤其是面对 Vue 和 React 这样的现代前端框架时，根本不知道从哪下手。

今天写这篇《零基础入门 Vue.js 开发指南》，就是希望用最平实的语言、最清晰的步骤，带你从“完全不会”到“能做出一个简单应用”。无论你是学生、转行者，还是只想试试前端开发的爱好者，只要你愿意动手敲代码，这篇教程都能帮到你。

安全提示：本文所有代码示例均基于官方推荐的最佳实践编写，不包含任何高危操作。在后续开发中，请始终注意避免在前端暴露敏感信息（如 API 密钥），并使用 HTTPS 传输数据。

---

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

Vue.js（简称 Vue）是一个用于构建用户界面的 JavaScript 框架。你可以把它理解成一套“工具包”，帮助你更高效地开发网页应用，比如后台管理系统、电商页面、甚至复杂的单页应用（SPA）。

和另一个流行的前端框架 React 相比，Vue 的学习曲线更平缓，语法更直观，特别适合零基础的朋友入门。虽然 React 在大型项目中非常强大，但 Vue 的模板语法对新手更友好，写起来像 HTML，读起来也更容易理解。

对比项	Vue.js	React
语法风格	基于 HTML 模板 + 指令	基于 JavaScript 的 JSX 语法
学习难度	较低（适合新手）	中等（需熟悉 JS 和函数式编程）
官方工具链	Vue CLI / Vite（开箱即用）	Create React App / Vite
社区生态	丰富，中文文档完善	极其庞大，英文资源为主

我不是说 React 不好——它非常优秀！但如果你是零基础，Vue 会是你更友好的第一站。

---

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

我们不需要安装复杂软件，只需三步：

第 1 步：安装 Node.js

Vue 项目依赖 Node.js 运行。请前往 https://nodejs.org 下载 LTS 版本（长期支持版），安装时一路“下一步”即可。

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

node -v
npm -v

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

第 2 步：创建 Vue 项目

我们使用官方推荐的 Vite 工具（比旧版 Vue CLI 更快）。在终端执行：

npm create vue@latest my-vue-app

系统会提示你选择配置，初学者建议全选默认（直接回车），最后会生成一个叫 my-vue-app 的文件夹。

第 3 步：启动开发服务器

进入项目目录并启动：

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

你会看到类似这样的输出：

  ➜  Local:   http://localhost:5173/

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

💡 避坑指南：如果端口被占用（比如 5173 被其他程序占了），Vite 会自动换一个端口，留意终端提示即可。

---

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

别被“响应式”“组件”这些词吓到，我用生活例子解释：

1. 响应式数据（Reactivity）

想象你在 Excel 表格里写公式：A1=10，B1=A1*2。当你改 A1 为 20，B1 自动变成 40。Vue 的响应式就是这个道理——数据变了，页面自动更新。

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

// 定义一个响应式变量 count，初始值为 0
const count = ref(0)

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

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

• ref()：创建响应式变量
• {{ count }}：在模板中显示数据（叫“插值”）
• @click：监听点击事件（这是 Vue 的指令语法）

2. 组件（Component）

组件就像乐高积木——把页面拆成小块（头部、列表、按钮等），每块独立开发，再拼起来。

一个组件 = 逻辑（JS） + 模板（HTML） + 样式（CSS）

Vue 单文件组件（.vue 文件）天然支持这种结构：

<!-- HelloWorld.vue -->
<script setup>
defineProps(['msg']) // 接收外部传入的数据
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

<style scoped>
h1 {
  color: blue;
}
</style>

scoped 表示这个 CSS 只作用于当前组件，不会影响其他地方——这是 Vue 的安全设计之一。

---

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

现在，让我们用刚学的知识做一个真实的小应用！

步骤 1：清理默认文件

删除 src/components/WelcomeItem.vue 等无关文件，只保留：

• src/App.vue
• src/main.js

步骤 2：编写 App.vue

替换 App.vue 内容如下：

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

// 待办事项列表
const todos = ref([
  { id: 1, text: '学习 Vue', done: false },
  { id: 2, text: '写代码', done: true }
])

// 新增事项的输入框内容
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: 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 16px;">添加</button>
    </div>

    <!-- 任务列表 -->
    <ul>
      <li 
        v-for="todo in todos" 
        :key="todo.id"
        style="display: flex; justify-content: space-between; padding: 8px 0;"
      >
        <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">
          {{ todo.text }}
        </span>
        <button @click="() => removeTodo(todo.id)" style="color: red;">删除</button>
      </li>
    </ul>
  </div>
</template>

关键知识点解析：

• v-model：双向绑定输入框内容和 newTodo 变量
• v-for：循环渲染列表（必须加 :key 提升性能）
• @keyup.enter：监听回车键
• :style：动态绑定样式（根据 done 状态决定是否加删除线）

步骤 3：运行查看效果

保存文件后，浏览器会自动刷新。你现在可以：

• 输入任务并按回车添加
• 点击“删除”移除任务
• （进阶）尝试双击任务切换完成状态（留作练习）

✅ 恭喜！你已经做出了第一个 Vue 应用！

---

五、新手常见问题解答

Q1：为什么我改了代码，页面没更新？

• 检查终端是否有报错（红色文字）
• 确保文件保存了（有些编辑器需要手动 Ctrl+S）
• 刷新浏览器（极少数情况热更新失效）

Q2：ref 和普通变量有什么区别？

普通变量（如 let x = 1）改变时，Vue 不会更新页面。只有用 ref()、reactive() 包裹的数据才是响应式的。

Q3：能直接用 CDN 引入 Vue 吗？

可以！适合简单 demo：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

但正式项目强烈推荐用 Vite 构建，因为：

• 支持模块化开发
• 自动压缩代码
• 更好的错误提示
• 与现代工具链集成

Q4：Vue 和 React 到底该学哪个？

如果你目标是快速上手、做项目，选 Vue；
如果你计划进大厂或深入前端工程化，React 生态更广。

我的建议：先掌握一个，再横向对比学习。两者核心思想相通！

---

六、下一步学习建议

你已经跨出了最重要的一步！接下来：

📚 推荐学习路径

1. 官方文档：https://cn.vuejs.org（中文，质量极高）
2. 核心概念深入：
   • 计算属性（computed）
   • 生命周期钩子（onMounted 等）
   • 父子组件通信（props / emit）
3. 工具链扩展：
   • 路由（Vue Router）
   • 状态管理（Pinia，替代 Vuex）
4. 实战项目：
   • 天气预报应用（调用公开 API）
   • 个人博客（结合 Markdown）

🔒 安全开发提醒

• 永远不要在前端代码中硬编码密码、密钥
• 用户输入要过滤（防 XSS 攻击）
• 使用 v-html 时务必谨慎（只渲染可信内容）

---

结语

写这篇教程，是因为我深知每个大神都曾是小白。Vue 的设计哲学就是“渐进式”——你可以从一行代码开始，慢慢成长为专业开发者。

不要怕犯错，我当初写的第一个 Vue 组件连按钮都点不动，但现在维护着上千 star 的开源项目。坚持动手，持续思考，你也能做到。

如果你觉得这篇教程有帮助，欢迎在评论区留言你的第一个 Vue 应用截图（文字描述也行！）。技术路上，我们一起成长。

技术分享的意义，不在于展示多高深，而在于让下一个初学者少走弯路。 —— 一名普通的开源维护者