Vue3实战指南：从零构建现代化Web应用（新手友好版）-CSDN博客

1. 环境准备：你的第一行Vue3代码

嘿，朋友们，我是老陈，一个在前后端摸爬滚打了十多年的老码农。今天咱们不聊那些高深莫测的原理，就实实在在地，手把手带你从零开始，用Vue3构建一个现代化的Web应用。我知道，很多新手朋友一看到“框架”、“响应式”、“组合式API”这些词就头大，别担心，咱们今天就用最“小白”的方式，把这些东西都变成你手里的工具。想象一下，你即将像搭积木一样，轻松搭建出一个功能完整、交互流畅的网页应用，是不是有点小激动？

那么，万事开头第一步，就是搭好我们的“工作台”。Vue3的开发环境搭建，现在真的简单到超乎你想象。你不需要配置一堆令人头疼的Webpack参数，官方提供的脚手架工具create-vue已经帮你把一切都安排得明明白白。首先，你得确保你的电脑上安装了Node.js，版本最好在18.0或更高。怎么检查？打开你的命令行工具（Windows上是CMD或PowerShell，Mac上是终端），输入 node -v 并回车。如果蹦出来一个版本号，并且大于等于18，那恭喜你，可以直接进入下一步。如果没有，或者版本太旧，那就去Node.js官网下载最新的长期支持版（LTS），像安装普通软件一样装好它。

有了Node.js，我们就有了npm这个强大的包管理工具。接下来，找一个你喜欢的文件夹，比如在桌面上新建一个叫vue-projects的目录，然后在命令行里进入这个目录。接下来，就是见证奇迹的时刻：输入命令 npm create vue@latest 并回车。这个命令会从网络上下载并运行Vue官方的项目创建工具。你会看到命令行里开始问你一系列问题，就像在做一个简单的选择题问卷。

Project name: 这里让你输入项目名字，比如 my-first-vue3-app，直接键盘输入就行。 Add TypeScript? 是否添加TypeScript支持？对于纯新手，我建议先选 No，咱们先用纯JavaScript把核心概念玩转，以后再上TypeScript这把“利器”。 Add JSX Support? 是否添加JSX支持？同样，先 No。Vue默认的模板语法更直观。 Add Vue Router? 是否添加Vue Router？这个我强烈建议选 Yes。它是用来做页面路由的，哪怕你现在只想做一个单页，先装上它，以后加页面会非常方便。 Add Pinia? 是否添加Pinia？也建议选 Yes。这是Vue3官方推荐的状态管理库，比之前的Vuex更简单好用，我们先装上，后续管理共享数据时会用到。 Add Vitest? 是否添加单元测试工具？新手可以先 No，专注于功能开发。 Add ESLint? 是否添加代码检查工具？建议选 Yes。它能帮你养成好的代码习惯，避免低级错误。 Add Prettier? 是否添加代码格式化工具？强烈建议 Yes。它能自动整理你的代码格式，让你写的代码永远整洁漂亮。

一路按提示选择或回车（默认就是No），项目骨架就在瞬间生成了。然后，按照提示进入项目目录并安装依赖：cd my-first-vue3-app，然后 npm install。这个安装过程可能会花一两分钟，因为它正在下载项目需要的所有“零件”。安装完成后，运行 npm run dev。此时，命令行会告诉你一个本地服务器地址，通常是 http://localhost:5173。用浏览器打开它，你会看到一个带着Vue Logo和一系列链接的欢迎页面——恭喜你，你的第一个Vue3应用已经跑起来了！整个过程，你一行代码还没写，但一个现代化的、具备热重载（修改代码自动刷新页面）、代码检查、格式化的开发环境已经准备就绪。这比我们当年手动配置Webpack不知道幸福了多少倍。

2. 项目结构初探：理解Vue3的“文件夹哲学”

项目跑起来之后，咱们先别急着写代码。用VSCode打开刚才创建的项目文件夹，你会看到一堆文件和文件夹。对于新手来说，这看起来可能有点复杂，但别慌，咱们来一个个拆解，理解每个部分的作用。这就像你拿到一个新家的钥匙，总得先看看客厅、卧室、厨房都在哪，对吧？

首先看根目录下的几个文件：index.html 是整个应用的唯一HTML入口文件，非常干净；package.json 是项目的“身份证”和“购物清单”，记录了项目信息、依赖包和脚本命令；vite.config.js 是构建工具Vite的配置文件，目前基本不用动它。重点是 src 这个文件夹，这是我们未来绝大部分时间待的地方，是我们真正的“工作车间”。进去看看，assets 文件夹用来放图片、字体等静态资源；components 文件夹，顾名思义，是存放我们自定义组件的地方，Vue的核心思想就是组件化，这里以后会很热闹。

最关键的两个文件是 src/App.vue 和 src/main.js。咱们先打开 main.js，它的内容非常精简：

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

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

我来翻译一下：第一行，从vue这个包里“请”来了一个叫createApp的函数。第二行，引入了一个全局样式文件。第三行，从当前目录下“请”来了App.vue这个文件，并给它起了个小名叫App。最后一行，是核心魔法：createApp函数以App为根组件，创建了一个Vue应用实例，然后把这个实例“挂载”到HTML