Vue3 起步（保姆级教程）

Vue3 起步：从零开始构建你的第一个响应式应用

你是否曾为网页的动态交互而头疼？按钮点击后页面却毫无反应，表单提交后需要手动刷新？别急，Vue 3.0 的出现，正是为了解决这类“传统前端”的痛点。它用简洁的语法和强大的响应式系统，让你用更少的代码实现更复杂的交互。今天，我们就来一起开启 Vue3 起步之旅，从一个空白文件开始，亲手搭建一个会“思考”的网页。

Vue3 起步并不难，就像学骑自行车——一开始会摇晃，但只要掌握核心平衡点，很快就能稳稳前行。接下来，我们将一步步带你完成环境搭建、组件创建、数据绑定和事件处理，让你真正理解“响应式”的含义。

安装与初始化：准备你的开发环境

在动手写代码前，先确保你的开发环境就绪。Vue3 起步的第一步，就是安装 Node.js。推荐使用 Node 16 或更高版本，因为 Vue3 依赖现代 JavaScript 特性。你可以通过命令行检查版本：

node -v

如果未安装，前往 nodejs.org 下载 LTS 版本。安装完成后，建议使用 npm 或 pnpm 作为包管理器。我们这里以 pnpm 为例，因为它安装速度更快，依赖管理更高效。

npm install -g pnpm

mkdir my-vue3-app
cd my-vue3-app

pnpm create vue@latest

执行上述命令后，系统会引导你配置项目。建议选择以下选项：

Use TypeScript？否（初学者可先不用）
Use JSX Syntax？否
Pick a package manager：pnpm
Pick a CSS preprocessor：None
Pick a linter / formatter：ESLint with Prettier
Pick a unit testing framework：None
Pick an end-to-end testing framework：None
Further instructions：Yes

根据提示，运行以下命令启动开发服务器：

pnpm install
pnpm run dev

此时浏览器会自动打开 http://localhost:5173，你将看到一个默认的 Vue 3 页面。这标志着你的 Vue3 起步已经成功！

理解 Vue3 的核心：响应式系统

Vue3 最大的革新之一，是采用了基于 Proxy 的响应式系统。你可以把响应式理解为“自动更新的观察者”——当数据变化时，视图会自动重新渲染。

想象一下，你有一本魔法日记本。你写下一个数字：“今天心情值是 5”。如果你后来把数字改成 8，日记本会自动在所有相关页面上更新这个值，无需手动刷新。Vue3 就是这个“魔法日记本”的技术实现。

在 src/App.vue 文件中，我们来看一个简单的响应式例子：

<template>
  <!-- 这里显示的是响应式变量的值 -->
  <div>
    <p>当前心情值：{{ mood }}</p>
    <button @click="increaseMood">+1</button>
    <button @click="decreaseMood">-1</button>
  </div>
</template>

<script setup>
// 使用 ref 创建响应式变量
import { ref } from 'vue'

// mood 是一个响应式数据，初始值为 5
const mood = ref(5)

// 定义增加心情的方法
const increaseMood = () => {
  mood.value += 1  // 注意：必须通过 .value 访问值
}

// 定义减少心情的方法
const decreaseMood = () => {
  mood.value -= 1
}
</script>

关键点说明：

ref() 将一个原始值包装成响应式对象
模板中直接使用 {{ mood }}，Vue 会自动追踪依赖
JavaScript 中访问值必须用 .value，这是 Vue 3 的语法要求
@click 是事件绑定，点击按钮时触发对应方法

当你点击按钮时，页面会立刻更新，这就是响应式的魅力所在。

组件化开发：构建可复用的模块

在 Vue3 起步阶段，你很快会发现：一个页面越来越复杂。这时候，组件化就成了最佳实践。组件就像乐高积木，你可以把功能拆分成独立模块，再组合成完整应用。

我们来创建一个 Counter.vue 组件，用于显示和操作计数器：

<!-- src/components/Counter.vue -->
<template>
  <div class="counter">
    <h3>{{ title }}</h3>
    <p>当前数值：{{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>

<script setup>
// 接收父组件传入的属性
defineProps({
  title: {
    type: String,
    default: '计数器'
  }
})

// 使用 ref 声明响应式数据
const count = ref(0)

// 定义方法
const increment = () => {
  count.value += 1
}

const decrement = () => {
  count.value -= 1
}
</script>

<style scoped>
.counter {
  border: 1px solid #ddd;
  padding: 16px;
  margin: 8px 0;
  border-radius: 8px;
  background-color: #f9f9f9;
}
</style>

然后在 App.vue 中引入并使用它：

<!-- 在 App.vue 中引入组件 -->
<template>
  <div class="app">
    <h1>Vue3 起步：组件化实践</h1>
    <Counter title="主计数器" />
    <Counter title="副计数器" />
  </div>
</template>

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

这样，你就实现了组件复用。每个 <Counter /> 都有自己的状态，互不干扰。这就是 Vue3 起步时必须掌握的组件思想。

事件处理与表单绑定：让页面“动起来”

Vue3 起步的另一个核心能力是事件处理。通过 @click、@input 等指令，你可以轻松绑定用户行为。

我们来实现一个简单的待办事项列表：

<template>
  <div class="todo-app">
    <h2>待办事项</h2>
    
    <!-- 输入框绑定 -->
    <input 
      v-model="newTask" 
      placeholder="输入新任务"
      @keyup.enter="addTask"
    />
    
    <!-- 任务列表 -->
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
        <button @click="removeTask(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

// 声明响应式数据
const newTask = ref('')  // 新任务输入框
const tasks = ref([])   // 任务数组

// 添加任务方法
const addTask = () => {
  if (newTask.value.trim() !== '') {
    tasks.value.push(newTask.value.trim())
    newTask.value = ''  // 清空输入框
  }
}

// 删除任务方法
const removeTask = (index) => {
  tasks.value.splice(index, 1)
}
</script>

关键点解析：

v-model 是双向数据绑定指令，自动同步输入框和数据
@keyup.enter 只在按下回车键时触发
v-for 用于循环渲染列表，:key 是唯一标识符，提升性能
splice() 方法用于删除数组元素

这个例子展示了 Vue3 起步中“数据驱动视图”的核心理念：你只关心数据，Vue 会自动处理界面更新。

项目结构与开发规范：养成良好习惯

一个健康的 Vue3 项目，结构清晰至关重要。典型的目录结构如下：

src/
├── assets/           # 静态资源
├── components/       # 可复用组件
├── views/            # 页面级组件（路由页面）
├── router/           # 路由配置
├── store/            # 状态管理（如 Pinia）
├── App.vue           # 根组件
└── main.js           # 入口文件

在 main.js 中，我们注册 Vue 实例：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

建议从一开始就建立规范：

所有组件以大驼峰命名（如 UserProfile.vue）
使用 setup 语法糖，避免 options API
合理使用 ref 和 reactive，前者用于基本类型，后者用于对象
为所有组件添加 script setup 标签，提升可读性

Vue3 起步不仅是学习语法，更是培养工程思维的过程。良好的结构，能让你在项目变大时依然游刃有余。

总结：从 Vue3 起步迈向全栈之路

通过本文的实践，你已经完成了 Vue3 起步的关键步骤：环境搭建、响应式理解、组件化开发、事件处理和项目结构认知。这些内容构成了现代前端开发的基石。

记住，Vue3 起步不是终点，而是起点。当你能熟练使用 ref、v-model、v-for、@click 等核心语法后，下一步可以探索路由、状态管理、单元测试等进阶主题。

Vue3 起步的过程，就像在建造一座房子：地基打牢了，才能建高楼。愿你在前端的道路上，越走越稳，越走越远。