Vite 專案管理
# Vite 專案管理工具簡介
Vite 是現代前端開發工具，主要提供：
- 快速建立前端專案
- 開發伺服器，修改程式後即時更新
- 支援 Vanilla JavaScript、Vue、React、Svelte 等
- 內建模組化與打包功能
- 可產生適合部署到網站伺服器的正式版本
本範例會建立一個**無框架的 Vanilla JavaScript 專案**，並在畫面上顯示 `Hello Vite`。
---
## 一、安裝 Node.js
Vite 需要使用 Node.js 執行。Node.js 會同時安裝 npm，npm 是 JavaScript 套件管理工具。
請前往 Node.js 官方網站下載：
<https://nodejs.org/>
建議下載 **LTS 長期支援版本**，依照作業系統完成安裝。
安裝完成後，開啟終端機或命令提示字元，確認版本：
```bash
node -v
npm -v
```
如果能看到類似以下內容，就代表安裝成功：
```text
v22.x.x
10.x.x
```
---
## 二、建立 Vite 專案
Vite 不需要全域安裝，建議直接使用官方指令建立專案。
在終端機中執行：
```bash
npm create vite@latest hello-vite -- --template vanilla
```
指令說明：
- `npm create vite@latest`：使用最新版本的 Vite 建立工具
- `hello-vite`：專案資料夾名稱
- `--template vanilla`：使用原生 JavaScript，不使用任何框架
建立過程中如果出現確認提示，輸入 `y` 或按下 Enter 即可。
接著進入專案資料夾：
```bash
cd hello-vite
```
安裝專案所需的套件：
```bash
npm install
```
---
## 三、啟動開發伺服器
執行：
```bash
npm run dev
```
成功後通常會看到類似訊息：
```text
Local: http://localhost:5173/
```
在瀏覽器開啟：
```text
http://localhost:5173/
```
即可看到 Vite 的預設畫面。
---
## 四、修改畫面顯示 Hello Vite
開啟專案中的 `src/main.js`，將內容修改為：
```javascript
import './style.css'
document.querySelector('#app').innerHTML = `
<h1>Hello Vite</h1>
`
```
接著開啟 `src/style.css`，可以改成：
```css
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
color: #646cff;
}
```
Vite 開發伺服器會自動重新載入，重新整理瀏覽器後即可看到：
```text
Hello Vite
```
---
## 五、專案主要檔案
建立完成後，目錄大致如下：
```text
hello-vite/
├─ index.html
├─ package.json
├─ src/
│ ├─ main.js
│ └─ style.css
└─ node_modules/
```
主要檔案用途：
- `index.html`：網頁入口 HTML
- `src/main.js`：JavaScript 程式進入點
- `src/style.css`：樣式表
- `package.json`：專案設定與指令
- `node_modules/`：安裝的套件
---
## 六、建立正式版本
開發完成後，可以執行：
```bash
npm run build
```
Vite 會將專案打包到 `dist` 資料夾。
若要在本機預覽正式版本：
```bash
npm run preview
```
常用指令整理：
```bash
npm run dev # 啟動開發伺服器
npm run build # 建立正式版本
npm run preview # 預覽正式版本
```
相關學習地圖、教學課程
F2E 網站前端工程