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

作者：一位开源项目维护者，曾为多个 Vue 生态项目撰写文档

为什么我要写这篇教程？

我当初学前端的时候，面对“Vue”、“React”、“组件”、“响应式”这些词，完全一头雾水。更别说还要搭配后端、数据库、甚至爬虫了。但其实，只要有人用最简单的方式带你走一遍，你会发现：前端开发没那么难。

今天这篇《零基础入门 Vue.js 开发指南》，就是为那些连 HTML 是什么都不知道的新手准备的。我会用最通俗的语言，带着你一步步搭建一个能和后端（比如 Spring Boot）通信的小产品原型，顺便告诉你 JavaScript 和爬虫的关系——别担心，我们只用到最基础的部分。

---

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

Vue.js（简称 Vue）是一个用于构建用户界面的 JavaScript 框架。你可以把它理解成“搭积木”的工具：每个积木（叫“组件”）负责页面的一部分，比如导航栏、商品列表、搜索框等。把它们拼起来，就是一个完整的网页应用。

✅ 你能用 Vue 做什么？

• 公司官网
• 后台管理系统
• 电商产品页面
• 甚至配合后端做数据可视化面板

❌ 它不能做什么？

• 直接写爬虫（那是 Python 或 Node.js 的事）
• 替代后端（比如 Spring Boot）

但 Vue 可以调用后端接口，展示从爬虫或数据库获取的数据。这就是我们今天要做的！

---

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

第一步：安装 Node.js

Vue 依赖 Node.js（它让你能在电脑上运行 JavaScript，不只是在浏览器里）。

1. 打开 https://nodejs.org
2. 下载 LTS 版本（长期支持版，最稳定）
3. 安装时一路“下一步”

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

node -v
npm -v

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

第二步：创建你的第一个 Vue 项目

我们使用官方工具 Vite（比老工具更快），执行以下命令：

npm create vue@latest my-vue-app

按提示操作：

• 是否使用 TypeScript？→ 选 No
• 是否启用 ESLint / Prettier？→ 都选 Yes

然后进入项目并启动：

cd my-vue-app
npm install
npm run dev

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

Local:   http://localhost:5173/

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

💡 小贴士：npm run dev 是启动开发服务器的命令，改代码后页面会自动刷新。

---

三、核心概念：用“做菜”来理解 Vue

我当初学的时候，死记硬背“响应式”、“组件”这些词，结果越学越懵。后来我发现：用生活例子解释，一下就懂了。

概念	做菜类比	技术解释
组件（Component）	一道菜由多个小菜组成（比如宫保鸡丁 = 鸡肉 + 花生 + 酱汁）	页面拆成小块，每块独立开发、复用
数据（data）	食材清单（鸡腿 2 个、花生 50g）	存储在组件里的变量
响应式（Reactivity）	改了食材数量，成品自动变多/少	数据变了，页面自动更新
方法（method）	炒菜步骤（先热油，再下鸡）	组件里可调用的函数

示例：做一个“计数器”

打开 src/App.vue，替换成以下代码：

<template>
  <div>
    <h1>你点了 {{ count }} 次按钮</h1>
    <button @click="increment">+1</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    reset() {
      this.count = 0
    }
  }
}
</script>

保存后，浏览器会自动刷新。点击按钮，数字会变化！这就是 Vue 的响应式魔法。

🔍 关键点：

• {{ count }}：插值语法，显示数据
• @click：监听点击事件
• this.count：访问当前组件的数据

---

四、实战项目：展示“产品列表”（对接模拟后端）

现在我们来做一个真实场景：展示从后端获取的产品列表。

假设：公司用 Spring Boot 写了后端，提供 /api/products 接口，返回 JSON 数据。
而我们的 Vue 应用负责把这些数据显示出来。

步骤 1：模拟后端数据（不用真写 Spring Boot）

在真实项目中，你会调用 http://localhost:8080/api/products（Spring Boot 默认端口）。但为了零基础也能跑起来，我们用 Mock 数据代替。

在 src/App.vue 中添加：

<script>
export default {
  data() {
    return {
      products: []
    }
  },
  async mounted() {
    // 模拟从后端获取数据
    const mockData = [
      { id: 1, name: "iPhone 15", price: 5999 },
      { id: 2, name: "MacBook Air", price: 8999 },
      { id: 3, name: "AirPods Pro", price: 1899 }
    ];
    this.products = mockData;
  }
}
</script>

步骤 2：在页面显示产品列表

在 <template> 中加入：

<template>
  <div>
    <h1>产品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - ¥{{ product.price }}
      </li>
    </ul>
  </div>
</template>

保存后，你会看到三行产品信息！

🌟 关键语法：

• v-for：循环渲染列表
• :key：告诉 Vue 每个元素的唯一标识（提升性能）

（进阶）如果真要对接 Spring Boot？

等你学完基础，可以这样调用真实接口：

async mounted() {
  const response = await fetch('http://localhost:8080/api/products');
  this.products = await response.json();
}

⚠️ 注意：前后端端口不同（Vue 是 5173，Spring Boot 是 8080），会遇到 跨域问题。解决办法是在 Spring Boot 加 @CrossOrigin 注解，或者用代理（Vite 配置 vite.config.js）。

---

五、新手常见问题解答

Q1：Vue 和 JavaScript 是什么关系？

• JavaScript 是编程语言（就像中文是语言）
• Vue 是基于 JavaScript 的框架（就像“作文模板”）
• 你必须会 JS 基础（变量、函数、数组），但不用精通

Q2：我能用 Vue 写爬虫吗？

不能直接写。

• 爬虫通常在服务端运行（用 Python 的 requests，或 Node.js 的 Puppeteer）
• Vue 是前端框架，只能展示爬虫抓到的数据
• 架构通常是：爬虫 → 存数据库 → Spring Boot 提供 API → Vue 展示

Q3：为什么我的页面不更新？

检查三点：

1. 数据是否定义在 data() 里？
2. 修改数据时是否用了 this.xxx = 新值？
3. 列表渲染有没有加 :key？

Q4：需要学 TypeScript 吗？

初学者先用 JavaScript。等你熟悉 Vue 后，再考虑 TypeScript（它能帮你减少 bug）。

---

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

📚 学习路径推荐

阶段	学什么	推荐资源
第 1 周	HTML + CSS + JS 基础	MDN Web Docs
第 2 周	Vue 核心（组件、指令、响应式）	Vue 官方文档《基础》章节
第 3 周	Vue Router（页面跳转）、Pinia（状态管理）	Vue School 免费课
第 4 周	调用 API、对接 Spring Boot	自己搭个小项目

🛑 避坑指南（我踩过的雷）

• ❌ 不要一上来就学 Vuex（老状态管理库），现在用 Pinia 更简单
• ❌ 不要纠结“Vue 2 还是 Vue 3”——直接学 Vue 3
• ✅ 多写代码！哪怕只是改改颜色、加个按钮

🔜 下一步做什么？

尝试做一个 “电影搜索”小应用：

1. 用免费 API（如 https://www.omdbapi.com/）
2. 用户输入片名，Vue 发请求
3. 展示海报、评分、简介

这会用到：

• 表单输入（v-model）
• 异步请求（fetch）
• 条件渲染（v-if）

---

结语

我当初学 Vue 时，也以为要懂很多才能开始。但其实，只要会写 HTML 和一点点 JS，就能做出交互页面。今天这个教程，就是希望你迈出第一步。

记住：所有大神，都是从“Hello World”开始的。

如果你跟着做了计数器和产品列表，恭喜你——你已经是 Vue 开发者了！👏

本文所有代码均可在本地运行，无需后端。等你准备好，再接入 Spring Boot 或爬虫数据也不迟。

动手吧，你的第一个产品，正在等着被创造。