Vue.js 不是孤岛：从零构建你的第一个前端项目

接口余额不足

2025-12-23 06:50

阅读 570

五年前我刚转做后端开发时，以为只要写好 Java 接口就够了。直到有一天产品经理说：“这个页面要实时刷新数据”，我才意识到：不懂前端，协作效率会大打折扣。后来我花了两周时间学 Vue.js，发现它比想象中友好得多——尤其对有编程基础的开发者来说。今天，我就用最直白的方式，带你走进 Vue.js 的世界，并顺带聊聊它和 React、Java 的关系。

为什么是 Vue.js？

Vue.js 是一个用于构建用户界面的 JavaScript 框架。它的核心思想是“响应式”：当你修改数据，页面自动更新，不用手动操作 DOM（比如 document.getElementById 那种老办法）。

你可能听说过 React（由 Facebook 推出）或 Angular，它们也是主流前端框架。三者对比：

框架	学习曲线	语法风格	典型使用场景
Vue.js	平缓	模板 + JS	中小型项目、快速原型
React	中等	JSX（JS+HTML）	大型应用、跨平台
Angular	陡峭	TypeScript	企业级复杂系统

如果你会 Java，你会发现 Vue 的组件结构有点像“类”：每个组件封装自己的数据、逻辑和视图，彼此独立又可复用——这正是现代开发的核心思想。

💡 小提示：Vue 和 React 都是前端框架，和 Java（后端语言）不冲突。实际项目中，Vue/React 负责页面展示，Java（如 Spring Boot）提供 API 接口，前后端通过 HTTP 通信。

第一步：搭建开发环境

别被“环境搭建”吓到，现在工具已经非常傻瓜化。你只需要三样东西：

Node.js（包含 npm 包管理器）
代码编辑器（推荐 VS Code）
终端（命令行）

安装步骤

访问 https://nodejs.org，下载 LTS 版本（长期支持版），一路下一步安装。
打开终端，输入：
```
node -v
npm -v
```
如果显示版本号（如 v18.x），说明安装成功。
全局安装 Vue CLI（官方脚手架工具）：
```
npm install -g @vue/cli
```

⚠️ 安全提醒：不要随意运行来源不明的 npm 包。建议使用 npm audit 定期检查依赖安全漏洞。

核心概念：三分钟搞懂 Vue

1. 响应式数据

在 Vue 中，你只需声明数据，页面会自动同步变化。

<!-- App.vue -->
<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="count++">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

{{ count }}：插值表达式，显示变量值
@click：事件绑定，点击时执行 count++
data()：返回组件的初始数据

🌟 我当初学的时候，总想用 document.querySelector 改页面，结果越改越乱。后来明白：在 Vue 里，你只管改数据，框架负责更新视图！

2. 组件化开发

把页面拆成小积木。比如一个待办列表：

<!-- TodoItem.vue -->
<template>
  <li>{{ task.text }}</li>
</template>

<script>
export default {
  props: ['task'] // 接收父组件传来的数据
}
</script>

父组件使用它：

<template>
  <ul>
    <TodoItem v-for="t in tasks" :key="t.id" :task="t" />
  </ul>
</template>

<script>
import TodoItem from './TodoItem.vue'
export default {
  components: { TodoItem },
  data() {
    return {
      tasks: [
        { id: 1, text: '学习 Vue' },
        { id: 2, text: '写代码' }
      ]
    }
  }
}
</script>

props：父子组件通信的“接口”
v-for：循环渲染列表
:key：帮助 Vue 高效更新列表（必须加！）

实战：做一个简易任务管理器

我们将用 Vue 3 + Composition API（新版写法）完成一个能添加/删除任务的小应用。

步骤 1：创建项目

vue create vue-todo-app
# 选择 "Manually select features"
# 勾选 Babel, Router, Vuex (状态管理), CSS Pre-processors
# 其他默认即可
cd vue-todo-app
npm run serve

浏览器打开 http://localhost:8080，看到欢迎页即成功。

步骤 2：编写核心逻辑

替换 src/App.vue 内容：

<template>
  <div id="app">
    <h1>我的任务清单</h1>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="输入任务后回车" />
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.text }}
        <button @click="removeTask(task.id)">删除</button>
      </li>
    </ul>
    <p>共 {{ tasks.length }} 项任务</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const newTask = ref('')
    const tasks = ref([
      { id: 1, text: '初始化任务' }
    ])

    const addTask = () => {
      if (newTask.value.trim()) {
        tasks.value.push({
          id: Date.now(),
          text: newTask.value.trim()
        })
        newTask.value = ''
      }
    }

    const removeTask = (id) => {
      tasks.value = tasks.value.filter(t => t.id !== id)
    }

    return {
      newTask,
      tasks,
      addTask,
      removeTask
    }
  }
}
</script>

<style>
#app {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
}
input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}
</style>

关键点解析

ref()：创建响应式变量（替代 Vue 2 的 data）
v-model：双向绑定输入框内容到 newTask
@keyup.enter：监听回车键
Date.now() 作为 ID：简单但有效（实际项目建议用 UUID）

🔒 安全注意：虽然这是前端代码，但如果后续连接后端（比如用 Java Spring Boot），记得对用户输入做校验，防止 XSS 攻击（例如过滤 <script> 标签）。

新手常见问题解答

Q1：Vue 和 React 到底选哪个？

如果你是个人开发者或小团队，追求快速上手 → 选 Vue
如果目标是进大厂或做复杂交互（如社交、电商）→ 学 React 更通用
两者原理相通，掌握一个后学另一个很快

Q2：需要先学原生 JavaScript 吗？

必须的！但不用精通。至少掌握：

变量、函数、数组方法（如 map, filter）
ES6 语法（const, 箭头函数, 解构赋值）
Promise / async-await（处理异步请求）

Q3：Vue 项目怎么和 Java 后端联调？

典型流程：

Java 用 Spring Boot 写 REST API（如 /api/tasks）

Vue 用 axios 发送请求：

import axios from 'axios'
const res = await axios.get('/api/tasks')

开发时用代理避免跨域（在 vue.config.js 配置）

Q4：为什么我的数据变了页面没更新？

常见原因：

直接通过索引修改数组：arr[0] = newValue → 改用 arr.splice(0, 1, newValue)
添加新属性到对象：obj.newProp = value → 改用 this.$set(obj, 'newProp', value)（Vue 2）或直接用 ref/reactive（Vue 3）

下一步学习建议

巩固基础：完成 Vue 官方教程（https://vuejs.org/tutorial/）
实战进阶：
- 学习 Vue Router（页面路由）
- 掌握 Pinia（新一代状态管理，替代 Vuex）
- 尝试用 Axios 调用真实 API
扩展视野：
- 对比 React 的 Hooks 写法，理解“组合式逻辑”的优势
- 了解 Vite（下一代构建工具，比 Webpack 快 10-100 倍）
工程化：
- 学习 ESLint + Prettier 保证代码规范
- 用 Git 管理项目版本

最后送你一句话：前端不是“切页面”，而是构建用户体验的工程。无论你主攻 Java 还是其他后端技术，理解 Vue 这样的现代框架，会让你在团队中更具话语权。现在，去运行你的第一个 Vue 应用吧！

标签:JavaReact

最热最新

暂无评论

为你推荐

暂无相关推荐