如何使用 Vite 設置 React 項目

教學

JavaScript React

作者選擇了Code.org作為Write for DOnations計劃的捐贈對象。

介紹

通常，您可能會使用Create React App來創建新項目，但安裝超過140 MB的依賴項可能需要很多時間。 Vite是一個輕量級工具，它只需佔用31 MB的依賴項，這將節省啟動新項目所需的時間。 Vite還使用瀏覽器本地的ES（ECMAScript）模塊來鏈接JavaScript文件，這樣在每次文件更改後就不需要重建整個捆綁包。這些差異導致使用Vite創建、更新和構建React應用時體驗更快。

本教程將使用Vite工具搭建一個新的React應用。您將創建一個帶有新組件、CSS和圖像文件的基本應用程序，並準備優化的捆綁包以進行部署。

使用DigitalOcean App Platform簡化部署React應用程序。在幾分鐘內直接從GitHub部署React。

先決條件

要按照本教程進行操作，您需要以下東西：

Node.js 版本需為 12.2.0 或更高，並已安裝在您的計算機上。您可以使用我們的教程如何安裝 Node.js 安裝最新版本的 Node.js。
Yarn 包管理器版本需為 1.22.0 或更高，並已安裝在您的計算機上。您可以在如何安裝和使用 Yarn 包管理器進行 Node.js 第 1 步中安裝 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

您將使用wget下載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 props將分別將對應的圖片屬性設置為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 App 的標題列替換為您自訂的應用程式標題。

儲存並關閉 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