在 VSCode 上设置 React 和 Vite：分步教程

Vite 是一款快速高效的构建工具，为现代 Web 项目提供高性能、灵活、精简的开发体验。

创建 React 项目可能比较慢，可能需要几分钟，从而拖慢开发进度。如果机器比较老旧，情况会更糟。

Vite 将使您的项目比平时更快。它还允许您选择要使用的框架。

在本分步教程中，您将学习如何在 VSCode 编辑器上安装带有 Vite 的 React。

本文最适合初级前端开发人员。

步骤 1：打开 VScode（Visual Studio Code）编辑器并打开一个新的终端。
为此，请点击屏幕左上角的三个白点，然后选择“终端”和“新终端”。

或按“Ctrl”键

第 2 步：在终端内，输入npm create vite@latest并按回车键。

它将请求下载 create-vite@latest 包的权限。

按下y并点击回车键。
它将下载 create-vite@latest 软件包；只需 2 到 3 秒。

步骤3： Vite 允许您为项目命名。默认名称为vite-project。

在此步骤中，您可以将名称更改为任何您想要的名称，或者将其保留为默认名称并按回车键。

我将保留默认名称。

步骤 4：您将看到一个列表；使用箭头键在列表中上下移动，按 Enter 键选择您喜欢的选项。
在此步骤中，我们将选择 React

接下来，您将看到四个可供选择的选项，导航到并选择JavaScript。

就这样，你现在拥有了你的 Vite 项目。小菜一碟，轻松搞定。

但我们还没有完成；您必须运行您的项目并使其上线。

步骤 5：使用您在步骤 3 中保存的名称输入您的 Vite 项目。

查看你的终端，你会看到一个包含三个命令的列表。准确输入第一个命令，然后按回车键。查看下图以便更好地理解。

在上图中，我输入了列表中的第一个命令。如果您保存项目时使用的名称与我的不同，则您的命令将会有所不同。

按照您在终端上看到的方式输入它，然后按回车键访问您的项目。

步骤6：接下来，输入列表中的第二个命令，npm install然后单击“Enter”。

这将安装 Vite 项目内的所有依赖项。

完成安装需要 3 秒到 1 分钟的时间，具体取决于您的机器和互联网的速度。

步骤 7：输入列表中的第三个命令npm run dev。请记住，输入时务必与列表中显示的完全一致。

输入npm run dev并按回车键。它将启动你的 Vite 项目。

在您的终端上，您将看到一个蓝色链接；单击它即可在您的 Web 浏览器中打开您的 Vite 项目。

您的 Vite React 项目将如下所示；

步骤 8：要访问您的项目文件，请转到您的 VScode 编辑器并单击Explorer屏幕左上角。

将打开一个面板，您将看到包含所有 Vite 和 React 包的项目文件夹。

您现在可以开始进行您的项目了。

结论：
瞧，这根本不难，整个过程也没花太长时间。随着时间的推移和不断练习，它会变得更快、更直观。

现在你已经学会了如何在 VSCode 编辑器上安装 React 和 Vite，我建议你继续练习，学习安装其他库和框架。记住，熟能生巧。

谢谢您
，祝您
编码愉快。