如何使用Vite设置React项目

教程

JavaScript React

作者选择了Code.org作为Write for DOnations计划的一部分接受捐赠。

介绍

通常，您可能会使用Create React App来创建新项目，但安装超过140 MB的依赖项可能会花费很多时间。 Vite是一个轻量级工具，只需要31 MB的依赖项，这将节省启动新项目的时间。 Vite还使用浏览器原生的ES（ECMAScript）模块来链接JavaScript文件，这样在每个文件更改后不会重新构建整个包。这些差异导致使用Vite创建、更新和构建React App时的体验更快。

本教程将使用Vite工具搭建一个新的React App。您将创建一个基本的应用程序，其中包括一个新组件、CSS和一个图像文件，并为部署准备一个优化的包。

使用DigitalOcean App Platform简化部署React应用程序。在几分钟内直接从GitHub部署React。

先决条件

要按照本教程进行操作，您需要准备以下内容：

Node.js 版本需为 12.2.0 或更高，并已安装在您的计算机上。您可以按照我们的教程在如何安装 Node.js 中安装最新版本的 Node.js。
Yarn 包管理器版本需为 1.22.0 或更高，并已安装在您的计算机上。您可以按照如何安装和使用 Yarn 包管理器中的第一步安装 Yarn。
熟悉 HTML、CSS 和现代 JavaScript。了解 React 中使用的现代 JS 也会有所帮助。
A foundational knowledge of React, which you can learn with the How To Code in React series.
A mobile phone connected to the same Wifi network as your computer so you can preview your app from mobile.

步骤 1 — 创建 Vite 项目

在此步骤中，您将使用命令行工具使用 Vite 工具创建一个新的 React 项目。您将使用 yarn 包管理器来安装并运行脚本。

运行以下命令在你的终端中搭建一个新的 Vite 项目：

yarn create vite

该命令将从远程 npm 仓库运行 Vite 可执行文件。它将配置必要的工具以搭建一个 React 本地开发环境。最后，它将打开一个命令行菜单，用于项目设置和语言类型。

脚本执行完毕后，将提示你输入项目名称：

Outputyarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
- create-vite
- cva
? Project name: » vite-project

输入你的项目名称（本教程将使用 digital-ocean-vite 作为示例名称）：

digital-ocean-vite

输入项目名称后，Vite 将提示你选择一个框架：

Output? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

Vite 允许你启动各种项目类型，不仅限于 React。目前支持 React，Preact，Vue，Lit，Svelte 和 vanilla JavaScript 项目。

使用键盘箭头键选择 React。

选择 React 框架后，Vite 将提示你选择语言类型。你可以使用 JavaScript 或 TypeScript 来开发项目。

使用箭头键选择 JavaScript：

Output? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

设置完框架后，你将看到项目已经搭建完成的输出。然后，Vite 将指示你使用 Yarn 安装项目的依赖项：

OutputDone:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

按照指示导航到你的项目文件夹：

cd digital-ocean-vite

然后，使用 yarn 命令安装项目的依赖项：

yarn

安装完成后，依赖项安装程序将返回安装依赖项所需的时间：

Outputsuccess Saved lockfile.
Done in 43.26s.

您现在已经使用 Vite 设置了一个新的 React 项目，并安装了 React 和 Vite 所需的包。

接下来，您将启动开发服务器以测试应用程序。

第 2 步 —— 启动开发服务器

在这一步中，您将启动开发服务器以验证一切是否正常。

从 digital-ocean-vite 文件夹内部，使用以下命令来运行开发服务器：

yarn run dev

此命令是 vite 命令的别名。它将以开发模式运行您的项目。

您将收到以下输出：

OutputVITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

接下来，打开您的浏览器并访问 http://localhost:5173/。默认的 React 项目将在端口 5173 上运行：

当您看到此应用程序正在运行时，您已成功安装了带有 Vite 的 React。接下来，您将从手机预览您的应用程序。

第 3 步 —— 从手机预览您的应用程序

Vite默认不会将您的开发应用程序暴露给您的网络。在这一步中，您将把应用程序暴露给您的本地网络，以便从您的手机预览它。

要在本地网络中运行您的应用程序，您必须首先停止当前的服务器。在您的终端中，使用CTRL+C来终止当前正在运行的开发服务器。

接下来，使用以下命令来运行您的项目：

yarn run dev --host

--host标志告诉Vite将您的应用程序暴露给本地网络。

您将在终端中收到此输出：

OutputVITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

这是一个本地IP地址，对您的计算机网络或路由器是唯一的。

在您的手机上打开浏览器，然后键入上述IP地址和端口以访问您的Vite应用程序的预览：

您现在已经在开发环境中运行了您的应用程序，并验证了它的正常工作。在下一步中，您将删除Vite附带的样板代码。

步骤4 — 删除默认样板

在这一步中，您将从src/目录中删除Vite项目的样板文件，这将允许您设置一个新的应用程序。您还将熟悉当前应用程序的默认项目结构。

使用以下命令来查看src/目录的内容：

ls src/

输出将列出所有可用文件：

OutputApp.css
App.jsx
assets
index.css
main.jsx

使用rm命令删除文件或目录。使用以下命令从项目中删除默认文件：

rm src/App.css
rm src/App.jsx
rm src/index.css

使用以下命令删除assets目录：

rm -r src/assets

-r标志是一个递归操作，在删除目录及其内容时需要。

删除这些文件后，src/目录中只剩下main.jsx。再次运行ls src/命令查看剩余文件：

ls src/

现在，该目录将只包含main.jsx文件：

Outputmain.jsx

因为您已删除所有其他文件，现在需要删除main.jsx中对已删除CSS文件的引用。

使用以下命令打开main.jsx进行编辑：

nano src/main.jsx

删除高亮显示的行以取消对CSS文件的引用：

/src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

保存并关闭main.jsx文件。

使用以下命令在src/目录下创建一个名为App.jsx的新文件：

nano src/App.jsx

将以下代码添加到App.jsx文件中：

/src/App.jsx

export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

此代码创建了一个名为App的新功能性React组件。export default前缀告诉JavaScript将此函数导出为默认导出。函数体包含一个带有Hello World文本的<div>。

保存并关闭App.jsx文件。

使用以下命令再次运行开发服务器：

yarn run dev --host

现在，在浏览器中打开或刷新http://localhost:3000，以访问显示Hello World文本的空白页面：

在这一步中，您移除了Vite项目中的一些默认文件。接下来，您将构建一个带有新组件、CSS文件和图像文件的基本应用程序。

步骤5 —— 创建一个基本应用程序

在这一步中，您将通过创建一个基本应用程序来创建组件、添加CSS文件并链接图像。首先退出开发服务器。

在下面的子部分中，您将为您的React应用程序创建一个新组件。

创建一个组件

创建一个新组件会使您的项目更具模块化。您将把所有组件添加到components目录中，以保持组织有序。

使用以下命令在src/中创建一个名为components的新目录：

mkdir src/components

接下来，使用以下命令在src/components/目录中创建一个名为Welcome.jsx的新文件：

nano src/components/Welcome.jsx

将以下代码添加到Welcome.jsx文件中：

/src/components/Welcome.jsx

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}

以上代码将创建一个名为Welcome的新功能性React组件。前缀export default告诉JavaScript将此函数作为默认导出。

具有类名wrapper的div标签允许您在CSS中定位此部分。h1和p标签将在屏幕上显示消息。

保存并关闭文件。

接下来，您将在App.jsx文件中引用此新组件。

使用以下命令打开App.jsx：

nano src/App.jsx

使用突出显示的代码更新App.jsx的内容：

/src/App.jsx

import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

此行代码将Welcome.jsx导入应用程序，并将新组件链接到函数体中。完成后，保存并关闭文件。

在下一小节中，您将向您的应用程序添加一个图像。

添加图像

在React中添加图像是应用程序开发中的常见用例。

使用以下命令在src/目录下创建一个名为img的新目录：

mkdir src/img

使用此命令导航到src/img目录：

cd src/img

您将下载Sammy的图像到src/img。

使用wget下载图像：

wget https://html.sammy-codes.com/images/small-profile.jpeg

使用以下命令重命名图像：

mv small-profile.jpeg sammy.jpeg

这个命令将图像文件从small-profile.jpeg重命名为sammy.jpeg，以后引用时会更方便。

使用这个命令返回到根目录：

cd ../../

接下来，您将更新Welcome.jsx文件以链接到这个图像。打开该文件：

nano src/components/Welcome.jsx

通过添加下面突出显示的行来更新您的Welcome.jsx文件：

/src/components/Welcome.jsx

import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

第一行将把图像作为一个模块导入到React中。

函数体内的另一行将创建一个新的<img>标签，并将src属性链接到您刚刚导入的图像组件。width和height属性将分别设置相应的图像属性为200像素。

保存并关闭Welcome.jsx文件。

接下来，您将向项目中添加CSS。

添加CSS

在这个子部分中，您将向项目中添加一个自定义的CSS文件来为您的应用程序添加样式。

使用以下命令在src/目录下创建一个名为css的新目录：

mkdir src/css

现在，在src/css中创建一个名为main.css的新CSS文件：

nano src/css/main.css

在main.css文件中添加以下代码：

/src/css/main.css

body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}

h1 {
color: #8873be;
}

在上述CSS中，您设置了一个网格显示，并将项目放置在body中心。您还设置了字体系列和背景颜色。

.wrapper类将选择您的Welcome.jsx文件中的包装器div。此类的样式将执行以下操作：

设置背景颜色。
添加20像素的填充。
添加10像素的圆角。

h1选择器将针对HTML中的该标签，将其颜色设置为紫色的阴影。

完成后，请保存并关闭main.css文件。

接下来，您将从Welcome.jsx组件引用新的CSS文件。打开Welcome.jsx文件：

nano src/components/Welcome.jsx

使用突出显示的行更新文件的内容：

/src/components/Welcome.jsx

import Sammy from "../img/sammy.jpeg"
import "../css/main.css"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

此行将将CSS文件作为模块导入到您的组件中。您可能需要使用项目文件夹的正确文件路径更新此行。

完成后，请保存并关闭Welcome.jsx文件。

在以下子部分中，您将更改应用程序标题栏：

更改应用程序标题栏

默认情况下，Vite应用程序在浏览器窗口标题栏中显示文本Vite + React。在此步骤中，您将其更改为描述性标题。

打开位于根目录的index.html：

nano index.html

使用突出显示的文本更新<title>标签：

/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

这个文本将替换默认的Vite应用标题栏为您的自定义应用标题。

保存并关闭index.html文件。

如果您需要重新运行开发服务器，请运行以下命令：

yarn run dev --host

在所有这些更改之后，访问http://localhost:5173以查看您的应用程序。您将看到您的应用程序的新版本。

当您准备好继续构建时，可以关闭开发服务器。

您现在已经添加了一个图像，更改了样式，并制作了一个精美的用户界面。在下一步，也是最后一步中，您将构建一个用于部署的优化的应用程序包。

第6步 – 用于生产的构建

在这一步中，您将构建一个优化的应用程序包，准备部署到服务器。要创建构建，请在终端中运行以下命令：

yarn run build

此命令将创建一个新的dist文件夹，其中包含您可以部署到服务器的经过缩小的源文件。

您将收到类似于以下输出：

Outputvite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

您现在可以将dist文件夹的内容部署到在线服务器上。如果您有Apache或Nginx服务器，您可以手动上传内容。您也可以使用应用程序平台来运行构建脚本并自动生成构建文件。要将您的React应用部署到DigitalOcean的应用平台，请按照我们的教程如何将React应用部署到DigitalOcean应用平台进行操作。

结论

在本教程中，您使用Vite工具创建了一个新的React应用。您使用yarn create vite命令创建了一个全新的React应用程序。删除样板代码后，您通过添加自定义图像、CSS文件和更改标题栏来创建了您的组件。最后，您使用yarn run build命令创建了一个优化的捆绑包，准备部署。

现在您已经使用Vite构建了一个React应用，请查看您在如何在React.js系列中编写代码中可以做的其他事情，并探索其他React教程。

Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite