Vite 專案管理
# Vite 簡介
**Vite** 是現代前端開發工具，主要功能包括：
- 快速建立前端專案
- 提供開發伺服器（Development Server）
- 支援即時更新畫面（HMR，Hot Module Replacement）
- 支援 JavaScript、TypeScript、CSS 等
- 可搭配 React、Vue、Svelte，也可以建立「無框架」的原生 JavaScript 專案
- 提供正式環境建置功能
本範例會建立一個使用 **原生 JavaScript（Vanilla JavaScript）** 的專案，並在瀏覽器顯示：
```text
Hello Vite
```
---
## 1. 安裝 Node.js
Vite 需要透過 Node.js 執行。請到 Node.js 官方網站下載並安裝 LTS 版本：
<https://nodejs.org/>
安裝完成後，開啟終端機或命令提示字元，確認是否安裝成功：
```bash
node -v
npm -v
```
如果能看到版本號，例如：
```text
v20.x.x
10.x.x
```
就代表安裝成功。
- `node`：執行 JavaScript 的環境
- `npm`：Node.js 的套件管理工具，用來安裝與管理前端套件
> 建議使用 Node.js 20 或更新版本。
---
## 2. 建立 Vite 專案
在終端機執行以下指令：
```bash
npm create vite@latest hello-vite -- --template vanilla
```
這個指令的意思是：
- `npm create vite@latest`：使用最新版的 Vite 建立工具
- `hello-vite`：專案資料夾名稱
- `--template vanilla`：使用原生 JavaScript，不使用 React、Vue 等框架
接著進入專案目錄：
```bash
cd hello-vite
```
安裝專案需要的套件：
```bash
npm install
```
---
## 3. 修改程式碼顯示 Hello Vite
開啟專案中的：
```text
src/main.js
```
將內容修改為：
```javascript
document.querySelector('#app').innerHTML = `
<h1>Hello Vite</h1>
`;
```
Vite 建立的 `index.html` 預設已經有以下元素：
```html
<div id="app"></div>
```
因此 `main.js` 可以找到 `#app`，並將內容放入其中。
如果希望畫面更容易閱讀，也可以修改 `src/style.css`：
```css
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
font-family: Arial, sans-serif;
}
h1 {
color: #646cff;
}
```
---
## 4. 啟動開發伺服器
在專案目錄中執行：
```bash
npm run dev
```
成功後，終端機通常會顯示類似：
```text
Local: http://localhost:5173/
```
使用瀏覽器開啟：
<http://localhost:5173/>
即可看到：
```text
Hello Vite
```
Vite 的開發伺服器會持續執行。修改程式碼並儲存後，瀏覽器通常會自動更新畫面。
若要停止伺服器，可以在終端機按下：
```text
Ctrl + C
```
---
## 5. 專案結構
建立完成後，主要檔案大致如下：
```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/`：安裝的套件，通常不需要手動修改
---
## 6. 建立正式版檔案
開發完成後，可以執行：
```bash
npm run build
```
Vite 會將專案打包到：
```text
dist/
```
`dist` 資料夾中的內容即可部署到網站伺服器或靜態網站服務。
相關學習地圖、教學課程
F2E 網站前端工程