Vue基础教程（10）搭建开发与调试环境之使用使用Vite方式安装Vue.js：闪电战开发：用Vite搭建Vue.js，告别Webpack“编译等半天”的痛！

一、 前言：兄弟们，Webpack的“慢”我真的受够了！

作为一名前端er，不知道你有没有过这样的悲惨经历：新项目第一天，信心满满打开终端，npm run dev 回车——然后就可以去泡杯咖啡，甚至刷个短视频，因为你知道，Webpack 老爷车要启动起来，没个二三十秒根本下不来。每次保存代码，浏览器热更新也要等上好几秒。一天下来，光等待编译的时间凑一凑，都够看完一集电视剧了！

说好的敏捷开发呢？说好的丝滑体验呢？全被漫长的等待给磨没了。

别慌，救世主来了！它就是 Vite（法语意为“快速”，发音 /vit/，就像“veet”）。这可不是我吹，Vite 的诞生，简直就是前端开发工具界的一场“闪电战”。由 Vue 作者尤雨溪亲自打造，它的口号简单粗暴：“给你快如闪电的冷启动和热更新！”

所以，今天这篇文，咱就不整那些虚头巴脑的理论了。咱们来点实际的，我带你用 Vite 的方式，从零搭建一个 Vue.js 的开发调试环境，再附上一个功能完整的示例。保证让你看完就能上手，上手就能感受到“飞一般”的速度！

二、 为什么是Vite？它比Webpack“香”在哪儿？

在撸起袖子开干之前，咱们得先明白，Vite 凭什么这么“狂”？

1. 核心优势：基于ES Modules（ESM）

Webpack 这类传统工具，不管你项目多大，启动前必须先把你所有的代码和依赖“打包”在一起（bundle），这个过程非常耗时。

Vite 则另辟蹊径。它利用现代浏览器原生支持的 ES Modules 特性，将你的代码分成依赖和源码两部分：

• 依赖：大多是不怎么变的纯 JavaScript（比如 vue 本身）。Vite 使用速度极快的 esbuild（用 Go 编写）进行预构建，轻松秒级完成。
• 源码：通常是需要转换的模块（比如 .vue、.ts 文件）。Vite 采取 “按需编译” 的策略。浏览器请求哪个模块，Vite 才瞬间编译哪个模块。你根本不需要等待整个应用打包完成。

打个比方：
Webpack 就像一家餐馆，你点菜前，厨师必须把菜单上所有的菜都先做一份备着，你一点单，他直接上菜（慢在启动）。
Vite 则像一家现代化快餐店，厨房流水线高效，你点一个汉堡，他立刻现场制作一个给你（快在按需）。

2. 体验上的降维打击

• 冷启动速度：无论你的项目依赖多庞大，Vite 的启动时间基本是毫秒级。你敲下 npm run dev，浏览器页面“唰”一下就出来了。
• 热更新（HMR）：当你修改一个组件时，Vite 只精准地更新那个组件。速度极快，几乎是你一保存，浏览器里的效果就同步了，状态还都能保持住！

总结一下：Vite 不是为了取代 Webpack，而是在开发阶段提供了一种更极致、更现代的体验。对于 Vue 开发来说，它现在已经是官方推荐的脚手架工具，这还不跟紧队伍？

三、 手把手实战：用Vite搭建Vue.js开发环境

好了，口水话不多说，咱们直接开干！保证每一步都清晰明了。

环境准备：
确保你的电脑上安装了 Node.js（版本 14.18+ 或 16+ 更佳）。可以在终端里用 node -v 检查。

步骤 1：创建项目

打开你的终端，进入你想存放项目的目录，然后执行以下命令：

# 使用 npm
npm create vue@latest my-vite-vue-app

# 或者使用 yarn
yarn create vue my-vite-vue-app

# 或者使用 pnpm
pnpm create vue my-vite-vue-app

这里的 create vue 是 Vue 官方的项目脚手架工具，它背后使用的就是 Vite！my-vite-vue-app 是你的项目名，可以随便改。

步骤 2：配置项目选项

命令执行后，脚手架会贴心地问你几个问题，来初始化项目配置：

✔ Project name: … my-vite-vue-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Appli