首页 >web前端 >js教程 >逐步设置 React 和 Vite

逐步设置 React 和 Vite

Patricia Arquette
Patricia Arquette原创
2024-10-09 14:33:02921浏览

Vite 是一款现代构建工具,旨在提供快速高效的开发体验,特别是对于基于 JavaScript 的应用程序,例如 React、Vue 等。

Vite本身更注重开发速度,在开发过程中以最少的配置和更快的加载时间。由于汇总的优化,生产构建时间通常也更快

在本教程中,您将逐步学习如何使用 Vite 安装 Reactjs

第 1 步
打开你已有的终端应用程序,这里我使用cmder,然后转到你要安装应用程序的文件夹

Setup React With Vite Step-by-Step

第 2 步
要执行安装过程,您可以使用“yarn”或“npm”,
在终端中输入以下命令,

##NPM
npm create vite@latest

##YARN
yarn create vite

我用纱线。

执行上面的命令后,会要求你输入要创建的应用程序的名称,如下图

Setup React With Vite Step-by-Step

第三步
您将看到一个列表;使用方向键在列表中上下移动,点击 Enter 选择您喜欢的选项。
在这一步中,我们将选择React

Setup React With Vite Step-by-Step

第三步
您将看到五个选项可供选择,导航至并选择
这里我会选择Typescript SWC

Setup React With Vite Step-by-Step

仅此而已;您现在已经拥有了您的 Vite 项目
Setup React With Vite Step-by-Step

步骤 4
按照步骤3最终结果的指示,会要求你进入你创建的应用程序文件夹,然后按照指示运行命令

### masuk ke folder aplikasi anda
cd react-vite

### install dependencies
yarn install

Setup React With Vite Step-by-Step

第 5 步
步骤 4 中的所有过程都成功后,要运行应用程序,您需要运行以下命令

### npm 
npm run dev

### yarn
yarn dev

Setup React With Vite Step-by-Step

应用程序成功运行后,您可以根据终端显示的链接访问应用程序

Setup React With Vite Step-by-Step


结论
你看,一点也不难,整个过程也不需要很长时间就能完成。

现在您已经成功学会了使用Vitejs安装ReactJS应用

谢谢

以上是逐步设置 React 和 Vite的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn