大家好，今天我们将一起学习如何使用 Vite 创建一个 Vue 3 项目。Vite 是一个现代的前端构建工具，它以极快的速度提供了丰富的功能，如模块热替换（HMR），能够即时更新模块，而无需重新加载页面或清除应用程序状态。

什么是 Vite

首先，让我们简单了解一下 Vite。Vite 读作 /vit/，是一个轻量级的前端构建工具，它特别为现代 web 应用设计。与以往的构建工具不同，Vite 在开发环境下使用原生 ES 模块导入，这样可以跳过打包过程，实现快速的冷启动和热更新。

Vite 的优点

1. 快速启动：Vite 在启动时只加载项目入口文件，而不是整个项目，这大大加快了启动速度。
2. 模块热替换：Vite 提供了快速的 HMR，能够即时更新代码，而不需要重新加载页面。
3. 按需加载：Vite 支持 ES 模块的动态导入，可以实现按需加载资源，减少首屏加载时间。
4. 易于配置：Vite 默认配置简单，但同时也提供了丰富的插件系统，可以根据需要进行扩展。

注意事项

使用 Vite 前，请确保你的 Node.js 版本至少为 14.18。部分模板可能需要更高版本的 Node.js。此外，如果你使用的是 Windows 操作系统，建议使用 Windows 10 或更高版本，以获得最佳体验。

创建 Vue 3 项目

现在，让我们开始创建一个 Vue 3 项目。

手动创建项目

1. 安装 Vite：我们可以使用 npm 或 yarn 来创建项目。对于 npm 用户，可以使用命令 npm create vite@latest，而对于 yarn 用户，可以使用 yarn create vite。
2. 设置项目名称：在创建过程中，系统会提示你输入项目名称，例如 vite-project。
3. 选择框架和变体：选择 Vue 作为框架，并选择 JavaScript 或 TypeScript 作为语言。
4. 完成项目创建：按照提示完成项目创建后，进入项目目录，安装依赖，并启动项目。

通过模板自动创建项目

如果你想要快速开始，可以使用 Vite 提供的模板。以下是使用 yarn 创建一个基于 Vue 3 的 Vite 项目的命令：

yarn create vite hello-vite --template vue

启动项目

1. 安装依赖：进入项目目录，执行 yarn 命令安装所有依赖。
2. 启动服务：使用 yarn dev 命令启动开发服务器。
3. 访问项目：在浏览器中访问 http://localhost:5173，你将看到 Vue 应用的首页。

Vue 3 项目目录结构

创建项目后，你会看到一个清晰的目录结构，包括 src、public、node_modules 等目录，以及 package.json、vite.config.js 等配置文件。

Vue 3 项目运行过程

项目运行过程

当你执行 yarn dev 命令时，Vite 会启动一个开发服务器，并通过 src/main.js 文件将 src/App.vue 组件渲染到 index.html 文件的指定区域。

项目关键文件

• src/App.vue：项目的根组件，可以引用其他组件。
• index.html：页面的入口文件，预留了 Vue 应用实例控制的区域。
• src/main.js：项目的入口文件，用于创建 Vue 应用实例。

通过今天的学习，你应该能够掌握如何使用 Vite 创建并启动一个 Vue 3 项目。Vite 的高效和易用性，相信会为你的前端开发带来极大的便利。