【React框架】什么是 Vite？如何使用vite自動生成react的目錄？

什么是 Vite？

Vite 是一個基于原生 ES Modules 開發的前端構建工具，由 Evan You（Vue 的作者）開發。它最大的特點包括：

極速冷啟動：因為利用了瀏覽器原生的 ES Modules，所以在開發時無需等待整個打包過程。
高效熱更新（HMR）：文件變更后只更新改動部分，極大提升開發效率。
簡單配置：大部分項目即開箱即用，同時也支持靈活的配置和插件擴展。

使用 Vite 創建 React 項目

1. 確保環境準備

安裝 Node.js（建議使用 LTS 版本）。
終端支持 npm、yarn 或 pnpm 之一。

2. 創建項目

在終端中執行以下命令即可通過 Vite 腳手架創建一個 React 項目模板：

使用 npm：

npm create vite@latest my-react-app -- --template react

使用 yarn：

yarn create vite my-react-app --template react

使用 pnpm：

pnpm create vite my-react-app --template react

上述命令會自動下載 Vite 模板，并生成一個名為 my-react-app 的項目目錄。

3. 安裝依賴

進入項目目錄并安裝依賴包：

cd my-react-app
npm install
# 或 yarn install / pnpm install

Vite 創建的 React 項目目錄結構

創建完成后，項目的默認目錄結構大致如下：

my-react-app/
├── node_modules/             # 依賴庫
├── public/                   # 公共靜態資源（直接被瀏覽器訪問）
│   ├── favicon.svg           # 圖標等資源文件
│   └── vite.svg              # 示例圖片
├── src/                      # 源代碼目錄
│   ├── App.jsx               # 根組件，主要的應用邏輯
│   ├── main.jsx              # 應用入口文件，負責掛載 React 組件到 DOM
│   ├── index.css             # 全局樣式文件
│   └── vite-env.d.ts         # Vite 默認提供的 TypeScript 類型聲明（如果你使用 TypeScript，則包含在內）
├── .gitignore                # Git 忽略文件
├── index.html                # HTML 模板，Vite 會注入相關腳本和樣式
├── package.json              # 項目配置以及依賴聲明
├── README.md                 # 項目說明文檔
└── vite.config.js            # Vite 配置文件，可在其中自定義構建、插件、服務器等配置

說明：

public/
放置靜態資源，如圖片、圖標、manifest 等，Vite 不會對里面的資源做預處理，瀏覽器直接訪問。
src/
主要源碼存放處。main.jsx 作為入口文件，通過 ReactDOM.render()（或 React 18 的 createRoot）把 App.jsx 組件掛載到 index.html 中的 DOM 節點上。
index.html
作為模板文件，Vite 將在構建時注入打包后的腳本和樣式，你可以在此處添加 meta 標簽、鏈接外部資源等。
vite.config.js
配置文件用來定制 Vite 的行為，如插件配置、路徑別名、開發服務器設置等。例如，可以配置插件 @vitejs/plugin-react 來增強 React 開發體驗。

Vite 常用命令

在項目目錄下，可以通過 package.json 中定義的腳本來運行常用命令：

啟動開發服務器
```
npm run dev
```
這會啟動一個本地開發服務器（默認端口 3000 或其他可用端口），支持實時熱更新（HMR），在你修改代碼后頁面會自動更新。
構建生產版本
```
npm run build
```
該命令會把項目打包到 dist/ 目錄下，使用 Rollup 進行構建和優化，生成用于部署的靜態文件。
預覽生產構建
```
npm run preview
```
在構建生產版本后，可通過該命令在本地啟動一個模擬生產環境的服務器，方便你預覽生產構建效果。

Vite 的自定義配置

在 vite.config.js 文件中，你可以進行各種自定義配置。例如：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],resolve: {alias: {'@': '/src', // 使用 @ 表示 src 目錄},},server: {port: 3000,open: true, // 啟動后自動打開瀏覽器},
});

常用配置包括：

插件配置：通過插件擴展 Vite 的功能，如支持 React 的 Fast Refresh、TypeScript、PWA 等。
路徑別名：配置簡化模塊導入路徑，提升可讀性。
開發服務器設置：如端口號、代理設置、自動打開瀏覽器等。
構建選項：定制生產構建參數，如輸出目錄、代碼分割、壓縮等。

環境變量

Vite 支持基于 .env 文件的環境變量設置，需要注意的是環境變量名必須以 VITE_ 開頭才能在客戶端代碼中訪問。例如，在項目根目錄下創建一個 .env 文件：

VITE_API_URL=https://api.example.com

然后在代碼中通過 import.meta.env.VITE_API_URL 獲取對應的值。

總結

快速創建： 使用 Vite 腳手架可以非常便捷地搭建一個 React 項目。
目錄結構清晰： public/ 和 src/ 目錄的劃分讓靜態資源與源碼分離。
高效開發： Vite 利用 ES Modules 實現極速啟動和熱更新，大大提升開發體驗。
靈活配置： 通過 vite.config.js 和插件系統，你可以根據項目需求自定義各種構建和運行選項。

你可以查閱 Vite 官方文檔獲取更多使用細節和高級配置內容。這樣你就能根據項目需求靈活配置和擴展了。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/76508.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/76508.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/76508.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！