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

2 年 ago
科, 雅
6 minutes

引言

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

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

Info

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

先决条件

要按照这个教程进行操作，你需要以下材料：

  • Node.js version 12.2.0 or higher installed on your machine. You can install the latest version of Node.js with our tutorial on How To Install Node.js.
  • Yarn package manager version 1.22.0 or higher installed on your machine. You can install Install Yarn with Step 1 in How To Install and Use the Yarn Package Manager for Node.js.
  • Familiarity with HTML, CSS, and modern JavaScript. It also helps to know modern JS used in React.
  • 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.

第一步 – 创建一个Vite项目

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

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

  1. yarn create vite

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

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

Output
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将提示您选择一个框架：

Output
? 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。

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

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

Output
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

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

Output
success Saved lockfile.
Done in 43.26s.

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

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

第二步 – 启动开发服务器

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

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

  1. yarn run dev

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

以下是您将收到的输出结果。 (Yǐxià shì nín jiāng shōudào de shūchū jiéguǒ.)

Output
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将您的应用程序公开到本地网络。

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

Output
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/

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

Output
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

使用下面的命令删除资产目录。

  1. rm -r src/assets

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

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

  1. ls src/

现在，目录中只会包含 main.jsx 文件。

Output
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前缀告诉JavaScript将此函数作为默认导出。函数体包含一个带有“Hello World”文本的

。

保存并关闭App.jsx文件。

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

  1. yarn run dev --host

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

React App with

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

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

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

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

创建一个组件

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

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

  1. mkdir src/components

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

  1. 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文件：

  1. nano src/App.jsx

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

/src/App.jsx 请以中文原生语言重新表述。我需要一个选项：

请重新编写/src/App.jsx的内容。

import Welcome from "./components/Welcome"

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

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

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

加入一张图片

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

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

  1. mkdir src/img

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

  1. cd src/img

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

Sammy Image

使用wget命令下载图像。

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

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

  1. mv small-profile.jpeg sammy.jpeg

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

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

  1. cd ../../

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

  1. nano src/components/Welcome.jsx

通过添加下划线标出的行，在你的Welcome.jsx文件中进行更新。

/src/components/欢迎页面.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中。

在函数体内的另一行将创建一个新的 标签，并将 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。这个类的样式将执行以下操作：

  • Set a background color.
  • Add padding of 20 pixels.
  • Add rounder corners of 10 pixels.

h1选择器将针对HTML中的标签进行目标定位，并将其颜色设置为紫色的一种阴影色调。

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

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

  1. nano src/components/Welcome.jsx

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

/src/components/欢迎页.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。

  1. nano index.html

更新标题标签，将高亮文本添加进去。

/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文件。

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

  1. yarn run dev --host

经过所有的改变之后，访问 http://localhost:5173 来查看你的应用程序。你将会看到一个新版本的应用程序。

Final App Preview

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

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

第六步——生产建设

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

  1. yarn run build

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

你将会收到一个类似这样的输出。

Output
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 App。你使用 yarn create vite 命令搭建了一个全新的 React App。删除了模板代码后，通过添加自定义图像、CSS文件和更改标题栏来创建你的组件。最后，使用 yarn run build 命令创建了一个优化的打包文件，准备部署使用。

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

发表回复 0

Your email address will not be published. Required fields are marked *

✖
广告
将在 10 秒后关闭
bannerAds