如何使用 Vite 建立 React 项目

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

介绍

通常情况下,您可以使用 Create React App创建新项目,但安装超过140 MB的依赖可能需要很长时间。 Vite是一个轻量级的工具,需要31 MB的依赖,这将节省新项目启动的时间。

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

<$>[info] 简化使用 DigitalOcean App Platform的 React 应用程序的部署。

前提条件

要遵循本教程,您将需要以下内容:

Node.js版本 12.2.0 或更高版本安装在您的计算机上. 您可以安装最新版本的 Node.js 通过我们的教程在 How To Install Node.js上。
Yarn 包管理器版本 1.22.0 或更高版本安装在您的计算机上。您可以安装 Install Yarn 使用步骤 1 在 How To Install and Use the Yarn Package Manager for Node.js中。
熟悉 HTML、CSS 和 modern JavaScript)。它还有助于了解现代 JS 用于 React。您可以通过 [How To Code in React series](

步骤 1 - 创建一个快速的项目

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

在终端中运行以下命令,以创建一个新的Vite项目:

1yarn create vite

此命令将从远程npm存储库运行Vite可执行程序. 它将配置必要的工具来配置React本地开发环境. 最后,它将打开项目设置和语言类型的命令行菜单。

脚本完成后,您将被要求输入一个项目名称:

 1[secondary_label Output]
 2yarn create v1.22.10
 3[1/4] Resolving packages...
 4[2/4] Fetching packages...
 5[3/4] Linking dependencies...
 6[4/4] Building fresh packages...
 7
 8success Installed "[email protected]" with binaries:
 9- create-vite
10- cva
11? Project name: » vite-project

输入您的项目名称(本教程将使用数字海洋作为示例名称):

1digital-ocean-vite

输入项目名称后,Vite会提示您选择一个框架:

1[secondary_label Output]
2? Select a framework: » - Use arrow-keys. Return to submit.
3Vanilla
4Vue
5> React
6Preact
7Lit
8Svelte
9Others

目前,它支持 React, Preact, Vue, Lit, Svelte,和 vanilla JavaScript 项目。

使用您的键盘箭头键选择反应。

选择 React 框架后,Vite 会提示您选择语言类型,您可以使用 JavaScript 或 TypeScript 来处理您的项目。

使用箭头键选择JavaScript:

1[secondary_label Output]
2? Select a variant: » - Use arrow-keys. Return to submit.
3> JavaScript
4TypeScript
5JavaScript + SWC
6TypeScript + SWC

设置框架后,您将看到一个输出,即该项目已被划分。Vite 将指示您使用 Yarn 安装依赖:

 1[secondary_label Output]
 2Done:
 3Scaffolding project in path\to\digital-ocean-vite...
 4
 5Done. Now run:
 6
 7cd digital-ocean-vite
 8yarn
 9yarn dev
10
11Done in 129.89s.

按指示导航到您的项目文件夹:

1cd digital-ocean-vite

然后,使用yarn命令来安装项目的依赖性:

1yarn

完成后,依赖安装将返回一个输出,说明安装依赖需要多长时间:

1[secondary_label Output]
2success Saved lockfile.
3Done in 43.26s.

您现在使用 Vite 设置了新的 React 项目,并安装了 React 和 Vite 所需的包。

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

第2步:启动开发服务器

在此步骤中,您将启动开发服务器来验证一切是否正常工作。

从digital-ocean-vite文件夹中,使用以下命令运行开发服务器:

1yarn run dev

这个命令是vite命令的代名词,它会在开发模式下运行您的项目。

您将获得以下输出:

1[secondary_label Output]
2VITE v4.0.4 ready in 847 ms
3
4➜ Local: http://localhost:5173/
5➜ Network: use --host to expose
6➜ press h to show help

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

Default React Project with Vite

当你看到这个应用程序运行时,你已经成功安装了 React with Vite. 接下来,你将从手机上预览你的应用程序。

步骤 3 – 从手机预览您的应用程序

Vite 默认情况下不会将您的开发应用程序暴露在您的网络中. 在此步骤中,您将将应用程序暴露在您的本地网络中,以便从手机上预览。

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

接下来,使用以下命令来运行您的项目:

1yarn run dev --host

- 主机旗帜告诉 Vite 将您的应用暴露在本地网络中。

您将在您的终端中收到以下输出:

1[secondary_label Output]
2VITE v4.0.4 ready in 747 ms
3
4➜ Local: http://localhost:5173/
5➜ Network: http://your_ip_address:5173/
6➜ press h to show help

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

在手机上打开浏览器,然后输入上面的IP地址和端口,从手机上访问Vite应用程序的预览:

React App Mobile Phone preview

您现在已经在开发环境中运行您的应用程序,并验证它工作了. 在下一步,您将删除带有 Vite 的锅炉板代码。

步骤 4 – 删除默认锅炉板

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

使用以下命令查看您的 src/ 目录的内容:

1ls src/

输出将列出所有可用的文件:

1[secondary_label Output]
2App.css
3App.jsx
4assets
5index.css
6main.jsx

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

1rm src/App.css
2rm src/App.jsx
3rm src/index.css

使用以下命令删除资产目录:

1rm -r src/assets

-r旗是一个重复操作,需要在删除目录及其内容时。

刪除這些檔案後,只剩下「main.jsx」在「src/」目錄中,再執行「ls src/」命令以查看剩餘的檔案:

1ls src/

现在,目录只会包含‘main.jsx’文件:

1[secondary_label Output]
2main.jsx

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

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

1nano src/main.jsx

删除突出的行以解除链接到 CSS 文件:

 1[label /src/main.jsx]
 2import React from 'react'
 3import ReactDOM from 'react-dom/client'
 4import App from './App'
 5import "./index.css"
 6
 7ReactDOM.createRoot(document.getElementById('root')).render(
 8<React.StrictMode>
 9<App />
10</React.StrictMode>,
11)

保存并关闭 main.jsx 文件。

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

1nano src/App.jsx

将下列代码添加到App.jsx文件中:

1[label /src/App.jsx]
2export default function App() {
3return (
4<>
5<div>Hello World</div>
6</>
7);
8}

此代码创建了一个名为应用的新功能 React 组件。导出默认前缀告诉 JavaScript 将此函数导出为默认导出。

保存并关闭App.jsx文件。

使用以下命令重新运行开发服务器:

1yarn run dev --host

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

React App with "Hello World"

在此步骤中,您将从 Vite 项目中删除一些默认文件,然后您将构建一个包含新组件、CSS 文件和图像文件的基本应用程序。

步骤5:创建基本应用程序

在此步骤中,您将创建组件,添加CSS文件,并通过创建基本应用程序链接到图像。

在下面的子部分中,您将为您的 React App 创建一个新组件。

创建一个组件

创建一个新组件会为您的项目添加模块化,您将将所有组件添加到组件目录中,以保持事物的组织。

使用以下命令创建一个名为src/中的组件的新目录:

1mkdir src/components

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

1nano src/components/Welcome.jsx

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

 1[label /src/components/Welcome.jsx]
 2export default function Welcome() {
 3return (
 4<>
 5<div className="wrapper">
 6<h1>Welcome To My App</h1>
 7<p>This is going to be the coolest app in the world!</p>
 8</div>
 9</>
10);
11}

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

div标签与wrapper的类名称允许您在CSS中瞄准此部分. h1和p标签将在屏幕上显示消息。

保存并关闭文件。

接下来,您将在您的App.jsx文件中引用这个新组件。

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

1nano src/App.jsx

更新「App.jsx」的内容,以突出的代码:

 1[label /src/App.jsx]
 2import Welcome from "./components/Welcome"
 3
 4export default function App() {
 5return (
 6<>
 7<Welcome />
 8</>
 9)
10}

此代码行将导入Welcome.jsx到应用程序中,并将新组件链接到函数体中。

在下面的子部分中,您将向您的应用程序添加一个图像。

添加一个图像

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

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

1mkdir src/img

使用此命令导航到您的src/img目录:

1cd src/img

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

下载图片用wget:

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

用以下命令重命名图像:

1mv small-profile.jpeg sammy.jpeg

此命令将图像文件从small-profile.jpeg更名为sammy.jpeg,以后更容易参考。

使用此命令返回您的 root 目录:

1cd ../../

接下来,您将更新「Welcome.jsx」文件以链接到此图像。

1nano src/components/Welcome.jsx

更新您的Welcome.jsx文件,添加突出的行:

 1[label /src/components/Welcome.jsx]
 2import Sammy from "../img/sammy.jpeg"
 3
 4export default function Welcome() {
 5return (
 6<>
 7<div className="wrapper">
 8<h1>Welcome To My App</h1>
 9<p>This is going to be the coolest app in the world!</p>
10<img src={Sammy} alt="Sammy Image" width={200} height={200} />
11</div>
12</>
13)
14}

第一行将将图像导入 React 作为模块。

函数体内的另一行将创建一个新的<img>标签,并将src属性链接到您刚刚导入的图像组件。

保存并关闭Welcome.jsx文件。

接下来,您将添加CSS到您的项目。

添加CSS

在此子部分中,您将添加自定义的 CSS 文件到您的项目来设计您的应用程序。

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

1mkdir src/css

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

1nano src/css/main.css

将以下代码添加到 main.css 文件中:

 1[label /src/css/main.css]
 2body {
 3display: grid;
 4place-items: center;
 5background-color: #b4a7d6;
 6font-family: Arial, Helvetica, sans-serif;
 7}
 8
 9.wrapper {
10background-color: #fff9e6;
11padding: 20px;
12border-radius: 10px;
13}
14
15h1 {
16color: #8873be;
17}

在上面的CSS中,你会设置一个网格显示,并将项目放置在身体的中心,你还会设置一个字体家族和背景颜色。

.wrapper类将选择您的Welcome.jsx文件中的 wrapper div。

设置背景颜色.
添加 20 像素的折叠。
添加 10 像素的圆角。

h1选择器将在HTML中瞄准标签,将其颜色设置为紫色。

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

接下来,您将从Welcome.jsx组件中引用新的 CSS 文件。

1nano src/components/Welcome.jsx

用突出的行更新文件的内容:

 1[label /src/components/Welcome.jsx]
 2import Sammy from "../img/sammy.jpeg"
 3import "../css/main.css"
 4
 5export default function Welcome() {
 6return (
 7<>
 8<div className="wrapper">
 9<h1>Welcome To My App</h1>
10<p>This is going to be the coolest app in the world!</p>
11<img src={Sammy} alt="Sammy Image" width={200} height={200} />
12</div>
13</>
14)
15}

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

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

在下面的子部分中,您将更改应用程序的标题栏。

更改 app 标题栏

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

在 root 目录中打开 index.html:

1nano index.html

更新<title>标签以突出文本:

 1[label /index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5<meta charset="UTF-8" />
 6<link rel="icon" type="image/svg+xml" href="/vite.svg" />
 7<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8<title>My Cool App</title>
 9</head>
10<body>
11<div id="root"></div>
12<script type="module" src="/src/main.jsx"></script>
13</body>
14</html>

此文本将默认的 Vite App标题栏取代您的自定义应用程序标题。

保存并关闭index.html文件。

如果您需要重新启动开发服务器,请运行此命令:

1yarn run dev --host

经过所有这些更改,请访问「http://localhost:5173」查看您的应用程序,您将看到您的应用程序的新版本。

Final App Preview

您可以关闭开发服务器,当您准备好移动到构建。

您现在已经添加了图像,更改了风格,并创建了一个磨损的用户界面. 在下一步和最后一步,您将构建一个优化的应用程序包用于部署。

步骤6:建设生产

在此步骤中,您将构建一个优化的应用程序包,可部署到服务器上。

1yarn run build

此命令会创建一个新的dist文件夹,其中包含小型化源文件,您可以将其部署到您的服务器上进行生产。

您将获得类似于此的输出:

1[secondary_label Output]
2vite v4.0.4 building for production...
3✓ 34 modules transformed.
4dist/index.html 0.45 kB
5dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
6dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
7dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
8✨ Done in 1.63s.

您现在可以将dist文件夹的内容部署到在线服务器上。如果您有 Apache或 Nginx服务器,您可以手动上传内容。您还可以使用应用平台运行构建脚本并自动生成构建文件。若要将您的 React App 部署到 DigitalOcean 的应用平台上,请遵循我们关于如何向 DigitalOcean 应用程序部署 React 应用程序的教程。

结论

在本教程中,您使用 Vite 工具创建了一个新的 React 应用程序. 您用yarn create vite命令创建了一个新的 React 应用程序. 删除 boilerplate 代码后,您通过添加自定义图像、CSS 文件并更改标题栏创建了组件。

现在你有一个与 Vite 构建的 React 应用程序,请参阅如何在 React.js 系列中编码中的 React 可以做什么,并探索其他 React 教程。