Vite 安裝

step 1. 先確認已安裝 Node 環境和檢查版本

node -v

安裝時間是2024年1月，官方建議 Node 版本 18+, 20+。

step 2. 安裝 Vite

npm create vite@latest

step 3. terminal中設定專案: 專案名稱、框架、TS或JS 都以箭頭按鍵選取選項
Git Bash 中無法使用箭頭選擇，改用輸入文字會亂選一通還重複選項問題，嚇壞
查了一些資料但還是不知道該怎麼解決，所以在VSCode 中的terminal新增專案資料夾和設定。

快捷鍵 - VSCode的terminal: ctrl + 反引號

step 4 看一下目前專案資料夾已有哪些文件

在 package.json中已經可以看到React環境已建立好，及相關套件，相依檔案安裝在node_modules資料夾中，完整的描述檔在package-lock.json中。

 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

"dev" 就是指令 npm run dev 的dev => 運行開發環境。

step 5 cd 專案資料夾

step 6 npm install 新增 node_modules資料夾

step 7 npm run dev 開發運行環境
出現運行環境的網址

專案資料夾內容

public folder: 不做編譯，放靜態檔案，像是圖片
scr folder: 檔案做編譯
|__ main.jsx: 所有檔案的進入點。所有檔案(.js, .jsx, .css)都會與此檔案產生關聯，才會被編譯。
.eslintrc.cjs: 檢視程式碼品質的工具
.gitignore: Git 所忽略的檔案，像是 node_modules、dist、logs等等

node_modules folder:

存放專案所依賴的第三方套件（libraries/modules）。
當使用 npm install 時，指令會讀取 package.json 檔案中的相依性設定，然後將相關的套件下載並存放在 node_modules 資料夾中。
好處是可以將專案的相依套件隔離開來，避免版本衝突，同時也減小專案大小，因為不需要將所有套件的原始碼都包含在版本控制系統中。

index.html: 透過main.jsx載入 src資料夾編譯完的結果，

<!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>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

package.json：