Vue 3 新手教程

版本：Vue 3.4+ 组合式 API 专属
阅读建议：边看边敲代码，光看不练等于白看

---

目录

• 第一章：Vue 是什么？能吃吗？
• 第二章：环境搭建——三分钟拥有你的第一个 Vue 项目
• 第三章：模板语法——把数据塞进页面的魔法
• 第四章：响应式基础——数据变页面自动变的秘密
• 第五章：计算属性与监听器——懒人必备工具
• 第六章：组件化开发——拼乐高式写代码
• 第七章：生命周期——一个 Vue 组件的一生
• 第八章：Vue Router——单页应用的导航系统
• 第九章：Pinia——全局状态管理小卖部
• 第十章：实战项目：打造一个颜值在线的 TodoList
• 第十一章：常见坑点与避坑指南
• 第十二章：进阶路线与学习资源

---

第一章：Vue 是什么？能吃吗？

1.1 前端三巨头之一

目前前端江湖有三大框架鼎立：

• React：Facebook 出品，函数式编程信徒，灵活但学习曲线陡峭
• Angular：Google 亲儿子，大而全的企业级方案，重得像坦克
• Vue：尤雨溪大佬个人作品，渐进式、易上手，国人友好度拉满

Vue 的核心设计理念就是渐进式——你想用多少就用多少，不想学的可以先放一边，从小脚本到大型企业应用都能hold住。

1.2 Vue 3 vs Vue 2

Vue 3 是 2020 年发布的大版本，带来了：

• 组合式 API（Composition API）：更好的代码组织和逻辑复用
• 性能提升：虚拟 DOM 重写，打包体积更小，速度更快
• TypeScript 原生支持：大型项目更稳
• Teleport、Suspense 等新特性

本教程全程使用 Vue 3 + 组合式 API + <script setup> 语法糖，这是目前官方推荐的写法，也是企业开发的主流。

1.3 前置知识

学 Vue 之前你最好会：

• HTML + CSS 基础
• JavaScript 基础（ES6+ 语法：箭头函数、解构、模块导入导出等）
• 一点点 Node.js 常识

---

第二章：环境搭建——三分钟拥有你的第一个 Vue 项目

2.1 安装 Node.js

Vue 项目依赖 Node.js 环境，先去 Node.js 官网 下载 LTS 版本（长期支持版）。

安装完成后打开终端验证：

node -v  # 查看 node 版本
npm -v   # 查看 npm 版本

2.2 使用 Vite 创建项目

Vite 是新一代前端构建工具，比老的 Vue CLI 快得多，官方现在主推。

打开终端，找个你喜欢的文件夹，执行：

npm create vue@latest

然后会出现交互式提问：

√ Project name: ... my-vue-app
√ Add TypeScript? ... No
√ Add JSX Support? ... No
√ Add Vue Router for Single Page Application development? ... Yes
√ Add Pinia for state management? ... Yes
√ Add Vitest for Unit Testing? ... No
√ Add an End-to-End Testing Solution? ... No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes

新手建议：Router 和 Pinia 先选上，后面会讲；测试工具暂时不用。

创建完成后按提示操作：

cd my-vue-app
npm install
npm run dev

终端出现 [http://localhost:5173/](http://localhost:5173/) 就说明启动成功了，浏览器打开这个地址就能看到你的第一个 Vue 页面。

2.3 项目结构解析

my-vue-app/
├── node_modules/      # 依赖包文件夹（不用管）
├── public/            # 静态资源（不会被打包处理）
├── src/               # 源代码目录，干活的地方
│   ├── assets/        # 存放图片、样式等资源
│   ├── components/    # 公共组件
│   ├── router/        # 路由配置
│   ├── stores/        # Pinia 状态管理
│   ├── views/         # 页面组件
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── index.html         # HTML 入口
├── package.json       # 项目配置和依赖
└── vite.config.js     # Vite 配置

2.4 .vue 文件是什么？

一个 .vue 文件就是一个单文件组件（SFC），包含三部分：

<template>
  <!-- HTML 模板，页面结构 -->
</template>

<script setup>
  // JavaScript 逻辑，数据和方法
</script>

<style scoped>
  /* CSS 样式，scoped 表示只在当前组件生效 */
</style>

scoped 是个好东西，它让样式不会污染其他组件，妈妈再也不用担心我样式冲突了。