當使用 React 時，Vite 提供了簡化的開發體驗，與傳統的 Create React App 設定有一些關鍵差異。本篇部落格文章將探討典型 Vite 專案的結構，重點在於index.html 、 main.jsx和App.jsx等關鍵檔案。
1.index.html
在 Vite 支援的 React 應用程式中， index.html是一個關鍵的起點。與 Create React App 自動注入腳本不同，Vite 要求您直接指定腳本檔案。這種顯式包含簡化了對應用程式的入口點和依賴項的理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<!-- The root div where your React app will be mounted -->
<script type="module" src="/src/main.jsx"></script>
<!-- The script tag importing your main JavaScript module -->
</body>
</html>
在此範例中，您可以看到腳本標籤直接載入main.jsx 。這種直接包含是與 Create React App 的主要區別，它增強了專案入口點的清晰度和控制力。
1.1 依賴關係
為了確保您的腳本檔案正確加載，Vite 利用現代 ES 模組導入。確保您的package.json包含必要的依賴：
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
在 HTML 檔案中明確包含腳本可確保應用程式的正確載入和執行順序，從而減輕腳本載入的潛在問題。
2.main.jsx
main.jsx檔案充當 React 應用程式的入口點。該檔案負責將根元件渲染到 DOM 中。它通常是在index.html中腳本標記的src屬性中指定的檔案。
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';
// Render the root component into the root element in the HTML
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
在此文件中， ReactDOM.createRoot用於將App元件渲染到 id root的 HTML 元素中。這種直接渲染方法無需臨時保留任何根元素，從而簡化了流程，使應用程式從何處啟動以及涉及哪些元件變得清晰可見。
3.應用程式.jsx
App.jsx檔案包含主App元件的定義。該元件充當 React 元件樹的根。
import React from 'react';
const App = () => {
return (
<div className="App">
<h1>Hello, Vite and React!</h1>
</div>
);
};
export default App;
在此文件中，您定義應用程式的主要結構和行為。 App元件是您建立主要 UI 和功能的地方，就像在任何其他 React 專案中一樣。
附加資料和最佳實踐
4. 將 Tailwind CSS 與 Vite 結合使用
Tailwind CSS 可以輕鬆整合到 Vite 專案中，實現實用優先的樣式。
- 安裝 Tailwind CSS：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- 配置順風：
使用專案的特定路徑更新tailwind.config.js ：
module.exports = {
content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
- 在 CSS 中包含 Tailwind：
更新index.css以包含Tailwind的基礎、元件和實用程式：
@tailwind base;
@tailwind components;
@tailwind utilities;
5. 模組熱更換（HMR）
Vite提供開箱即用的HMR，讓您無需刷新頁面即可即時看到變化。
6. 環境變數
Vite 使用.env檔來管理環境變數。在專案的根目錄建立一個.env檔案並定義變數：
VITE_API_URL=https://api.example.com
使用import.meta.env在您的應用程式中存取這些變數：
const apiUrl = import.meta.env.VITE_API_URL;
7. 優化建置流程
Vite 的建置命令 ( vite build ) 在底層使用 Rollup 來產生高度最佳化的靜態資產以用於生產。這可確保您的應用程式快速且有效率。
結論
在 React 專案中使用 Vite 可以提供精簡且有效率的開發體驗。了解index.html 、 main.jsx和App.jsx等關鍵檔案的流程和結構可以顯著增強您的開發過程。憑藉 Tailwind CSS 整合、HMR 和優化建置的額外優勢，Vite 成為 React 開發人員的現代、強大工具。
透過利用這些功能和最佳實踐，您可以輕鬆建立高效能、可擴展且可維護的應用程式。
原文出處：https://dev.to/vyan/understanding-vite-flow-and-structure-in-a-react-project-2e84
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式