如何使用Vite建立一个React项目

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

介绍

通常，您可以使用 Create React App 创建一个新项目，但安装超过 140 MB 的依赖项可能需要很长时间。 Vite 是一个轻量级的工具，占用31MB的依赖，可以节省启动新项目的时间。 Vite 还使用浏览器原生的 ES (ECMAScript) 模块链接到 JavaScript 文件，它不会在每次文件更改后重新构建整个包。在使用 Vite 创建、更新和构建 React 应用程序时，这些差异会带来更快的体验。

本教程将使用 Vite 工具搭建一个新的 React 应用程序。您将使用新组件、CSS 和图像文件创建一个基本应用程序，并准备一个优化的捆绑包以进行部署。

先决条件

要学习本教程，您将需要以下内容：

Node.js 版本 12.2.0+ 安装在您的机器上。您可以使用如何安装 Node.js 安装最新版本的 Node.js。
Yarn 包管理器版本 1.22.0+ 安装在您的机器上并熟悉 Yarn 工作流程。使用如何为 Node.js 安装和使用 Yarn 包管理器中的步骤 1 安装 Yarn。
熟悉 HTML、CSS 和现代 JavaScript 。它还有助于了解 React 中使用的现代 JS。
React 的基础知识，您可以通过如何在 React 系列中编码学习。
手机连接到与您的计算机相同的 Wifi 网络，以从移动设备预览您的应用程序。

第 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 "create-vite@2.9.0" 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

Vite 允许您引导一系列项目类型，而不仅仅是 React。目前，它支持 React、Preact、Vue、Lit、Svelte 和 vanilla JavaScript 项目。

使用键盘箭头键选择 react。

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

使用箭头键选择 react：

Output? Select a variant: » - Use arrow-keys. Return to submit.
>   react
    react-ts

设置框架后，您将看到项目已搭建好的输出。 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 命令的别名。它将在开发模式下运行您的项目。

您将看到以下输出：

Output vite v2.9.1 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 910ms.

接下来，打开浏览器并访问 http://localhost:3000/。

您将看到在端口 3000 上运行的标准 React 项目：

当你看到这个应用程序正在运行时，你已经成功安装了 React with Vite。接下来，您将通过手机预览您的应用程序。

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

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

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

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

yarn run dev --host

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

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

Outputvite v2.9.1 dev server running at:
  > Network:  `http://ip_address:3000`
  > Network:  `http://ip_address:3000`
  > Local:    http://localhost:3000/
  > Network:  http://network_address:3000/
  ready in 477ms.

这些是您的计算机网络或路由器独有的本地 IP 地址。

在手机上打开浏览器，输入上述任意一个 IP 地址，即可在手机上查看 Vite 应用的预览：

您现在已经在开发环境中运行了您的应用程序并验证了它可以正常工作。

在下一步中，您将删除 Vite 附带的样板代码。

第 4 步 — 删除默认样板

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

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

ls src/

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

OutputApp.css
App.jsx
favicon.svg
index.css
logo.svg
main.jsx

使用 rm 命令删除单个文件：

rm src/App.css

从 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"
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.png"
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 App。在此步骤中，您将其更改为描述性标题。

在根目录中打开 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="/src/favicon.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 App 标题栏替换为您的自定义应用标题。

保存并关闭 index.html 文件。

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

yarn run dev --host

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

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

第 6 步 — 为生产而构建

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

yarn run build

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

您将看到以下输出：

Outputvite v2.9.1 building for production...
✓ 33 modules transformed.
dist/assets/pencil.4e765d86.png   66.46 KiB
dist/index.html                   0.45 KiB
dist/assets/index.e3291b10.css    0.18 KiB / gzip: 0.16 KiB
dist/assets/index.14619c6f.js     130.65 KiB / gzip: 42.34 KiB
Done in 2.50s.

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

结论

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

现在您已经使用 Vite 构建了一个 React 应用程序，请参阅如何在 React.js 系列中编码并探索其他 React 教程中的 React 可以做什么。