2025-02-08 14:00:01 +08:00
|
|
|
|
# 專案結構
|
|
|
|
|
此專案結構可以理解為何在改完程式後按ctrl+s儲存網頁會馬上更新,
|
|
|
|
|
不用像傳統vs一樣熱重載+f5網頁重整才能看到結果,
|
|
|
|
|
因為vite伺服器有幫忙裝熱重載模組,
|
|
|
|
|
專案儲存後React會自動將元件渲染在html上
|
|
|
|
|
## (重要)html與tsx的關係
|
|
|
|
|
![image](../assets/2-2.jpg)
|
|
|
|
|
|
2025-02-08 14:01:05 +08:00
|
|
|
|
### APP.tsx與APP.css
|
2025-02-08 14:00:01 +08:00
|
|
|
|
React框架下主要開發的頁面
|
|
|
|
|
|
2025-02-08 14:01:05 +08:00
|
|
|
|
### index.html與index.css
|
2025-02-08 14:00:01 +08:00
|
|
|
|
用來包裝App.tsx頁面
|
|
|
|
|
index.css主要用來改全域的css
|
|
|
|
|
|
2025-02-08 14:01:05 +08:00
|
|
|
|
### main.tsx
|
2025-02-08 14:00:01 +08:00
|
|
|
|
程式進入點,將App.tsx渲染在index.html上然後將網站run起來
|
|
|
|
|
(可以以winform或pyqt的app.run下去理解)
|
|
|
|
|
|
|
|
|
|
## Vite.config.ts
|
|
|
|
|
可以更改網站port號
|
2025-02-08 14:02:40 +08:00
|
|
|
|
![image](../assets/2-1.jpg)
|
2025-02-08 14:00:01 +08:00
|
|
|
|
|
|
|
|
|
## Package.json
|
|
|
|
|
安裝套件資訊都在這
|
2025-02-08 14:02:40 +08:00
|
|
|
|
![image](../assets/2-3.jpg)
|