Vite + React：从零开始构建高性能Web应用（超详细教程）

3 年 ago
科, 雅
5 minutes

引言

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

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

信息

用Silicon Cloud应用平台简化部署React应用。从GitHub直接在几分钟内部署React。

先决条件

要按照本教程进行操作，您需要以下材料：

  • 您的机器上安装了Node.js 12.2.0或更高版本。您可以通过我们的教程《如何安装Node.js》来安装最新版本的Node.js。
  • 您的机器上安装了Yarn包管理器1.22.0或更高版本。您可以通过《Node.js的Yarn包管理器安装和使用指南》中的第一步来安装Yarn。
  • 熟悉HTML、CSS和现代JavaScript。了解React中使用的现代JS也有帮助。
  • 具备React的基础知识，您可以通过《React编程系列教程》学习。
  • 一部与您的电脑连接到同一Wi-Fi网络的手机，以便您可以从手机预览您的应用。

第一步 – 创建一个Vite项目

在这一步中，您将使用命令行通过Vite工具创建一个新的React项目。您将使用Yarn包管理器来安装和运行脚本。

在您的终端中运行以下命令来建立一个新的Vite项目：

  1. yarn create vite

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

脚本执行完毕后，会提示您输入项目名称。

输出yarn 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作为示例名称）。

  1. digital-ocean-vite

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

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

Vite 允许您快速启动多种类型的项目，不仅限于 React。目前，它支持 React、Preact、Vue、Lit、Svelte 和纯JavaScript项目。

请使用键盘上的箭头键选择React。

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

请使用箭头键选择JavaScript。

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

在设置框架后，您将看到一个输出，显示该项目已经搭建完毕。然后，Vite会指示您使用Yarn安装依赖项。

输出Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

按照指示导航至您的项目文件夹。

  1. cd digital-ocean-vite

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

  1. yarn

完成后，依赖安装将返回一个输出，显示安装依赖所花费的时间。

输出success Saved lockfile.
Done in 43.26s.

您已经使用 Vite 建立了一个新的 React 项目，并且安装了 React 和 Vite 所需的包。

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

第二步 – 启动开发服务器

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

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

  1. yarn run dev

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

以下是您将收到的输出结果。

输出VITE 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端口上运行。

Default React Project with Vite

当您看到这个应用程序运行时，说明您已经成功安装了React和Vite。接下来，您将可以从您的手机上预览您的应用程序。

步骤3 — 通过手机预览您的应用程序

默认情况下，Vite不会将您的开发应用暴露给您的网络。在这一步骤中，您将把应用程序暴露给您的本地网络，以便您可以通过手机进行预览。

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

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

  1. yarn run dev --host

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

您将在终端中收到此输出结果。

输出VITE 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应用。

React App Mobile Phone preview

您现在已经在开发环境中成功运行并验证了您的应用。下一步，您将删除Vite的模板代码。

第四步 — 移除默认模板代码

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

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

  1. ls src/

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

输出
App.css
App.jsx
assets
index.css
main.jsx

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

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

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

  1. rm -r src/assets

-r标志表示递归操作，在删除目录及其内容时需要使用。

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

  1. ls src/

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

输出
main.jsx

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

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

  1. nano src/main.jsx

删除被高亮显示的行，以解除与CSS文件的引用链接。

/src/main.jsx -> 主文件.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的新文件：

  1. nano src/App.jsx

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

/src/App.jsx的内容应该用中文原生方式进行改写
export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

这段代码定义了一个名为 App 的 React 函数组件。export default 前缀表示将此函数作为模块的默认导出。函数体内部返回一个包含“Hello World”文本的 <div> 元素。

保存并关闭 App.jsx 文件。

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

  1. yarn run dev --host

现在，请在您的浏览器中打开或刷新 http://localhost:3000，您将看到一个空白页面，上面显示“Hello World”文本。

显示 'Hello World' 的 React 应用

在这一步中，您已经从 Vite 项目中删除了部分默认文件。接下来，您将使用新的组件、CSS 文件和图像文件来构建一个基础应用程序。

第5步 – 创建一个基础应用程序

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

在接下来的小节中，您将为您的 React 应用程序创建一个新组件。

创建一个组件

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

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

  1. mkdir src/components

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

  1. nano src/components/Welcome.jsx

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

/src/components/Welcome.jsx

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

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

保存并关闭文件。

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

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

  1. nano src/App.jsx

请重新编写/src/App.jsx的内容，用突出显示的代码更新它：

import Welcome from "./components/Welcome"

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

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

在以下的子部分中，您将为您的应用程序添加一张图片。

加入一张图片

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

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

  1. mkdir src/img

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

  1. cd src/img

您将把这张萨米的图片下载到src/img文件夹中。

Sammy Image

使用wget命令下载图像。

这是文章《如何使用Vite建立一个React项目》的第5部分（共9部分）。

内容片段: 

    

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

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

    

  1. mv small-profile.jpeg sammy.jpeg
    2.

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

使用该命令返回到您的根目录：

    

  1. cd ../../
    2.

接下来，您将更新Welcome.jsx文件，将其链接到这张图片。打开文件：

    

  1. nano src/components/Welcome.jsx
    2.

通过添加下划线标出的行，在您的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的新目录。

  1. mkdir src/css

现在，在 src/css 目录下创建一个名为 main.css 的CSS文件。

  1. 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代码中，我们为整个页面设置了网格布局，并将内容居中显示。同时，还设置了字体家族和背景颜色。

.wrapper 类将作用于 Welcome.jsx 文件中的包装器 div 元素。此类的样式将实现以下功能：

  • 设置背景颜色。
  • 添加 20 像素的内边距。
  • 设置 10 像素的圆角。

h1 选择器将针对HTML中的 <h1> 标签进行样式设置，并将其颜色设置为一种紫色调。

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

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

  1. 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>欢迎来到我的应用</h1>
<p>这将是世界上最酷的应用！</p>
<img src={Sammy} alt="Sammy 图片" width={200} height={200} />
</div>
</>
)
}

这行代码将CSS文件作为组件的模块导入。您可能需要根据您的项目文件夹结构更新代码行中正确的文件路径。

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

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

更改应用标题栏

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

在您的项目根目录中打开 index.html 文件。

  1. nano index.html

更新 <title> 标签，将高亮文本添加进去。

/index.html 网页
<!DOCTYPE html>
<html lang="zh-CN">
<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>我的酷炫应用</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

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

保存并关闭 index.html 文件。

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

  1. yarn run dev --host

完成所有更改后，访问 http://localhost:5173 来查看您的应用程序。您将看到一个新版本的应用程序。

最终应用预览

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

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

第六步——生产构建

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

  1. yarn run build

该命令将创建一个包含经过压缩的源文件的新目录，您可以将其部署到服务器上用于生产环境。

您将会收到一个类似这样的输出：

输出
vite 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 应用部署到 Silicon Cloud 的应用平台上，请按照我们的教程《如何将 React 应用程序部署到 Silicon Cloud 应用平台》进行操作。

结论

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

现在您已经用 Vite 构建了一个 React 应用程序，可以查看《如何使用 React.js 编码系列》中还能用 React 做什么，同时探索其他关于 React 的教程。

bannerAds