Vite 搭建第一个项目

原理讲完了，这一篇我们真正动手。从环境准备到项目启动，我会带你走完一条完整路径，确保你电脑上跑出一个能看的 Vite 页面。

环境准备

Vite 依赖 Node.js 运行。截至 Vite 7，官方要求的版本是 Node 20.19 以上，或者 22.12 以上。你可以打开终端确认自己的版本。

node -v

如果版本太低，去 Node.js 官网下载安装 LTS 版本即可。另外你需要一个包管理器，npm 随 Node 一起安装，已经够用。如果你习惯 pnpm 或 yarn 也可以，本教程的命令以 npm 为例。

用脚手架创建项目

Vite 官方提供了一个脚手架工具 create-vite，最方便的调用方式是：

npm create vite@latest

执行后它会问你几个问题。

第一步，输入项目名称，比如 my-vite-app。

第二步，选择框架模板。常见选项有：

• Vanilla 原生 JS，不带任何框架，最适合理解 Vite 本身。
• Vue 选择 Vue 3。
• React 选择 React。
• Svelte、Preact、Lit 等其他框架。

第三步，选择语言变体，比如是否使用 TypeScript。新手如果暂时不想碰 TS，可以先选 JavaScript 版，等学到后面再切换。

如果你想一步到位，也可以把参数直接写在命令里：

npm create vite@latest my-vite-app -- --template vanilla

--template 后面跟模板名，常用值有 vanilla、vue、react、vue-ts、react-ts。

安装依赖并启动

脚手架只是生成了文件骨架，真正的工具还在 npm 仓库里，需要安装。进入项目目录并安装依赖。

cd my-vite-app
npm install

装完后启动开发服务器：

npm run dev

终端会打印出类似下面的信息：

VITE v7.x  ready in 300 ms

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

打开 http://localhost:5173/，你就能看到 Vite 的欢迎页面了。试着改一下 src/main.js 里的文字，保存后页面会立刻更新，这就是我们上一篇说的 HMR。

在浏览器中预览

开发服务器默认监听 5173 端口。如果这个端口被占用，Vite 会自动往后找一个空闲端口，比如 5174。你也可以在启动后按 Ctrl + C 停止服务器。

页面里如果看到计数器按钮能点击、数字会变化，说明项目已经正常跑起来了。

项目目录结构一览

创建出来的目录大致长这样（以 Vanilla 模板为例）：

my-vite-app/
├── index.html          # 入口 HTML
├── package.json        # 项目信息与脚本
├── vite.config.js      # Vite 配置文件（部分模板默认不带，可自己加）
├── public/             # 原样拷贝的静态资源
└── src/
    ├── main.js         # JS 入口
    ├── style.css       # 样式
    └── counter.js      # 示例模块

这里先有个总体印象即可，下一篇我们会把每个文件和文件夹的职责逐个拆开讲清楚。

本篇小结

• Vite 7 需要 Node 20.19+ 或 22.12+。
• 用 npm create vite@latest 创建项目，按需选择框架模板。
• npm install 装依赖，npm run dev 启动开发服务器。
• 浏览器打开本地地址即可预览，改代码会热更新。

下一篇我们解剖 Vite 项目，弄明白 index.html、src、public、vite.config.js 各自是干什么的。