Vite 是 Vue 官方推荐的下一代前端构建工具，它凭借极快的冷启动速度和热更新体验，已经成为创建 Vue 3 项目的默认选择。
环境准备
在开始之前，确保你的开发环境中已安装以下工具：
- Node.js：版本要求 18.x 或更高（Vite 5 及以上）。可以在终端运行
node -v检查。推荐使用 nvm 管理多版本 Node。 - 包管理器：npm（Node 自带）、pnpm 或 yarn 均可。如果追求安装速度和磁盘空间，推荐 pnpm。
创建项目
打开终端，进入你希望存放项目的目录，执行以下命令：
# 使用 npm（Node 自带）
npm create vue@latest
# 或使用 pnpm
pnpm create vue@latest
# 或使用 yarn
yarn create vue@latest该命令会启动一个交互式向导，让你按需选择项目需要的功能：
✔ Project name: … my-vue-app # 项目名称，会作为文件夹名
✔ Add TypeScript? … No / Yes # 是否添加 TypeScript 支持
✔ Add JSX Support? … No / Yes # 是否支持 JSX
✔ Add Vue Router? … No / Yes # 是否添加路由
✔ Add Pinia? … No / Yes # 是否添加状态管理
✔ Add Vitest? … No / Yes # 是否添加单元测试
✔ Add ESLint? … No / Yes # 是否添加代码风格检查
✔ Add Prettier? … No / Yes # 是否添加代码格式化根据项目实际需求选择即可。对于初学者，可以先全部选 No，只保留一个最干净的 Vue 项目；对于正式项目，通常至少会选上 TypeScript、Vue Router、Pinia 和 ESLint。
启动项目
创建完成后，按照终端提示进入项目目录并启动开发服务器：
cd my-vue-app # 进入项目目录
npm install # 安装依赖（pnpm install 或 yarn install 同理）
npm run dev # 启动开发服务器启动成功后，终端会显示一个本地访问地址，通常是 http://localhost:5173。在浏览器中打开这个地址，就能看到 Vue 的默认欢迎页面。此时你可以直接修改 src/App.vue 文件，保存后浏览器会自动刷新（热更新），无需手动刷新页面。
项目目录结构
初始化后的标准项目结构如下（以选择了 TypeScript、Router、Pinia 后的典型结构为例）：
my-vue-app/
├── index.html # 入口 HTML 文件
├── package.json # 依赖和脚本配置
├── vite.config.ts # Vite 配置文件
├── tsconfig.json # TypeScript 配置
├── public/ # 静态资源（不经过编译，直接复制到输出目录）
└── src/ # 源代码目录
├── main.ts # 应用入口，挂载 Vue 实例
├── App.vue # 根组件
├── router/ # 路由配置（若选择了 Router）
│ └── index.ts
├── stores/ # Pinia store（若选择了 Pinia）
│ └── counter.ts
├── components/ # 公共组件
└── views/ # 页面级组件（与路由对应）关键文件说明：
| 文件 | 作用 |
|------|------|
| index.html | Vite 项目的入口 HTML，无需手动引入 JS 文件，Vite 会自动注入。 |
| src/main.ts | 创建 Vue 应用实例并挂载到 DOM 上，同时在这里注册路由、状态管理等插件。 |
| vite.config.ts | Vite 的配置文件，可设置路径别名、开发服务器代理、插件等。 |
| public/ | 存放不会经过编译处理的静态文件，如网站图标 favicon.ico。 |
几个实用的 Vite 命令
在项目根目录下，你可以使用以下 npm scripts（定义在 package.json 中）：
npm run dev # 启动开发服务器（热更新）
npm run build # 构建生产版本，输出到 dist/ 目录
npm run preview # 本地预览生产构建结果，用于检查打包后的效果Vite 的开发服务器启动速度通常在 1 秒以内，因为它不会预先打包所有依赖，而是基于原生 ES modules 的按需编译。这种“快”让开发流程非常流畅，也是 Vite 取代 Vue CLI 成为主流方案的核心原因之一。