第一章：Vue3 基础入门与环境搭建（从0到1建立认知）

一、入门：Vue3 核心概念与价值

1. 为什么选择 Vue3？对比 Vue2，Vue3 核心优势在于 Composition API（组合式API） 的灵活性、更好的TypeScript支持 以及 更小的打包体积，解决了大型项目中逻辑复用和类型安全的痛点。
2. Vue3 的核心特性速览：无需深入原理，先记住3个关键——组合式API（替代Vue2的Options API）、响应式系统升级（基于Proxy）、内置组件优化（如Teleport、Suspense）。

二、精通：环境搭建与项目创建全流程

1. 前置知识准备：确保安装 Node.js（v14.18+） 和 npm/yarn/pnpm，通过 node -v 和 npm -v 验证版本，避免后续项目报错。
2. 两种创建方式实战（覆盖不同需求）：
   • 快速创建（推荐新手）：使用 Vue 官方脚手架 npm create vue@latest，按终端提示选择“是否使用TypeScript”“是否安装Pinia”等，新手可先选“否”，降低初期复杂度，创建后执行 cd 项目名 → npm install → npm run dev 启动项目。
   • 手动配置（理解底层）：新建文件夹，执行 npm init -y 初始化package.json，手动安装 vue vite（构建工具），配置vite.config.js和index.html，掌握“入口文件-渲染逻辑-挂载节点”的核心链路，理解项目运行的底层逻辑。
3. 项目结构解析：重点掌握 src目录 ——main.js（入口，负责创建App实例和挂载）、App.vue（根组件，所有页面的父容器）、components（自定义组件存放地），其他文件（如assets、views）可后续章节再深入。

三、实战：第一个Vue3组件与页面渲染

1. 编写基础组件：在components文件夹下新建HelloVue3.vue，用Vue3的单文件组件（SFC）格式，包含<template>（HTML结构）、<script setup>（组合式API语法糖，无需export default）、<style>（样式）三部分，实现“点击按钮修改文本”的交互（用ref创建响应式变量）。
2. 组件引入与页面渲染：在App.vue中通过import HelloVue3 from './components/HelloVue3.vue'引入组件，在模板中直接使用<HelloVue3/>，启动项目后查看浏览器，验证组件渲染和交互效果，理解“组件复用”的基础逻辑。
3. 调试技巧：使用Vue官方调试工具 Vue DevTools（浏览器插件），在“Components”面板查看组件层级，在“Setup”面板查看响应式变量，快速定位代码问题。