2、开发环境搭建：Vite 构建工具、Node.js 版本要求、创建第一个 Vue3 项目、项目目录结构解析

好，咱们正式开始动手了。

搭建开发环境这件事，说实话，很多新手觉得枯燥。但我得说一句：环境搭得好，后面少踩坑。我在项目中见过太多因为 Node.js 版本不对、Vite 配置出问题，导致一整天都在折腾环境的同学。咱们今天就把这事一次性理清楚。

2.1 Node.js 版本要求

Vue3 和 Vite 都对 Node.js 有版本要求。说白了，版本太低跑不起来，版本太高也可能有小毛病。

我个人习惯用 nvm（Node Version Manager）来管理 Node 版本。为什么呢？因为不同项目可能依赖不同版本的 Node，你想想看，一个项目用 14，另一个用 18，总不能每次都卸载重装吧？

# 安装 Node 18 LTS
nvm install 18

# 切换到 18
nvm use 18

# 查看当前版本
node -v

2.2 Vite 构建工具

Vite 是 Vue 官方推荐的构建工具。它比 Webpack 快很多，尤其是开发时的热更新，几乎是秒级响应。

为什么会这么快？因为 Vite 利用了浏览器原生 ES Module 的能力，开发时不需要打包，直接按需加载。嗯，这里要注意，生产构建时它还是会用 Rollup 打包的，所以不用担心兼容性问题。

我在项目中从 Webpack 迁移到 Vite 时，最大的感受就是：终于不用等那几十秒的编译了。改一行代码，浏览器几乎瞬间刷新，开发体验提升了一个档次。

2.3 创建第一个 Vue3 项目

好，咱们现在开始创建项目。这一步很简单，Vite 提供了脚手架工具。

打开终端，执行以下命令：

# 使用 npm
npm create vue@latest

# 或者使用 yarn
yarn create vue

# 或者使用 pnpm（我个人推荐）
pnpm create vue

执行后，你会看到一些交互式选项。我建议你这样选：

选完后，脚手架会自动生成项目文件。然后进入项目目录，安装依赖：

cd my-vue3-app
npm install

安装完成后，启动开发服务器：

npm run dev

你会看到类似这样的输出：

  VITE v5.x.x  ready in 300ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.x.x:5173/

打开浏览器，访问 http://localhost:5173/，你就能看到 Vue3 的欢迎页面了。恭喜，第一个 Vue3 项目跑起来了！

2.4 项目目录结构解析

项目创建好了，咱们来看看里面都有什么。我带你一个一个过：

my-vue3-app/
├── node_modules/        # 依赖包（不用管它）
├── public/              # 静态资源（不会被编译）
│   └── favicon.ico
├── src/                 # 源代码（主要工作区）
│   ├── assets/          # 资源文件（图片、样式等）
│   ├── components/      # 组件目录
│   ├── router/          # 路由配置
│   ├── stores/          # Pinia 状态管理
│   ├── views/           # 页面视图
│   ├── App.vue          # 根组件
│   └── main.ts          # 入口文件
├── index.html           # HTML 模板
├── package.json         # 项目配置和依赖
├── tsconfig.json        # TypeScript 配置
├── vite.config.ts       # Vite 配置
└── env.d.ts             # 类型声明文件

咱们重点说几个：

src/main.ts

这是项目的入口文件。Vue 应用从这里启动：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

嗯，这里要注意，createApp 是 Vue3 的新 API，Vue2 用的是 new Vue()。如果你从 Vue2 转过来，这个变化要记住。

src/App.vue

根组件，所有页面都挂载在这里。它通常只包含一个 <router-view>：

<template>
  <router-view />
</template>

vite.config.ts

Vite 的配置文件。你可以在这里配置别名、代理、插件等。举个例子：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

配置了 @ 别名后，你就可以用 import Foo from '@/components/Foo.vue' 来代替相对路径了。我在项目中一直这么用，省心不少。

index.html

这个文件在项目根目录，而不是在 public 里。Vite 把它当作模板，会在构建时注入脚本和样式。你可以在里面修改页面标题：

<title>我的 Vue3 项目</title>

2.5 小结

好，环境搭建这块就讲完了。咱们回顾一下：

• Node.js 用 18 LTS，用 nvm 管理版本
• Vite 是构建工具，快就一个字
• 用 npm create vue@latest 创建项目
• 目录结构要熟悉，尤其是 src/、vite.config.ts、index.html

下一章，咱们开始写真正的组件代码。到时候你会看到，Vue3 的 Composition API 到底有多爽。

有问题随时翻回来看看。咱们下章见。