Vite 官方入门：从创建项目到第一次看到页面

准备工作

  • 已安装 Node.js（官方指南要求兼容的 Node 版本，以 Getting Started 当前说明为准）。

  • 步骤依据 Vite 官方 Getting Started，核实日期 2026-10-24；文档页显示版本线（如 v8.x）时以该页为准。[1]

操作步骤

1、用官方脚手架创建项目

做什么：npm create vite@latest

为什么：Getting Started 把脚手架创建列为标准入口，随后选择框架（Vue/React 等）与变体。[1]

怎么确认：交互结束后生成新目录，内含 package.json 与 vite.config.*；目录名与你输入的一致。

2、安装依赖

做什么：cd <project> && npm install

为什么：脚手架只生成清单，依赖需安装后才能启动开发服务器。[1]

怎么确认：出现 node_modules；npm install 退出码 0。

3、启动开发服务器

做什么：npm run dev

为什么：官方指南用 dev 脚本启动 Vite 开发服，支持快速 HMR。[1]

怎么确认：终端打印 Local URL（通常 http://localhost:5173）；浏览器打开能看到模板首页，改 src/App.* 保存后页面热更新。

4、生产构建冒烟

做什么：新终端在项目根执行 npm run build

为什么：确认生产打包通道可用，不只是 dev 能开。[1]

怎么确认：生成 dist/；命令成功结束。可用 npm run preview 按文档预览构建结果。

注意事项

  • 公司镜像源需自备 registry 配置；失败时先看 npm 报错而不是改 Vite 配置。

  • 框架选 Vue 或 React 只影响模板，Vite 核心流程相同。

来源

[1] Vite Documentation · Getting Started · https://vite.dev/guide/ · 核实于 2026-10-24

#Vite #前端 #教程 #Vue #脚手架