---
tags: 網頁切版直播班 - 2023 夏季班
---

# Vite 環境安裝流程

## 上半部：[Vite 範例](https://github.com/hexschool/web-layout-training-vite)所提供的功能

1. 使用 EJS 做版型管理
2. 支援 SCSS 編譯功能
3. 儲存檔案時，瀏覽器會自動更新，不需持續按 F5
4. 整合 GitHub 服務，能做到一鍵上傳網站空間

## Vite 本地環境影片教學

### 步驟一：安裝 [Node.js](https://nodejs.org/en)，請打開 VSCode 的終端機，輸入 `node -v` 後按 Enter，看是否有顯示版本號

> （node 版本請安裝 [v18.16.0](https://nodejs.org/dist/v18.16.0/) 版本）
> - Windows 64-bit Binary: https://nodejs.org/dist/v18.16.0/node-v18.16.0-x64.msi
> - macOS 64-bit Installer: https://nodejs.org/dist/v18.16.0/node-v18.16.0.pkg
>
> 可以觀看[此文章](https://support.apple.com/zh-tw/HT211814)了解自己是 intel 還是 M1 晶片

### 步驟二：下載此[資料夾](https://github.com/hexschool/web-layout-training-vite)，並解壓縮檔案

### 步驟三：到 VSCode 將資料夾拉入專案

### 步驟四：在終端機輸入指令 `npm install` 安裝插件

### 步驟五：輸入指令 `npm run dev`執行

### 步驟六：若步驟六執行成功，會打開瀏覽器，看到下方畫面，就代表你全部都成功了！

---

## 下半部：GitHub Pages 部署網站流程

### 步驟一：透過 VSCode 連接 Git 數據庫，先把 main 開發分支部署上去

git init 
git add .
git commit -m "first commit"
git remote add origin [GitHub Repositories Url]
git push -u origin main 

> 若您是使用 Windows 電腦，以下細節還請留意：
> 1. git commit -m "first commit"，請打成雙引號，而非單引號
> 2. 執行完 git push -u origin main 時，系統可能會問你要選擇 1. Web Browser 2. Personal access token 供使用者選擇，還請選擇 1。

> 只要上傳第一次開發分支環境，之後要更新後續版本，只需打

git add .
git commit -m "first commit"
git push

**細節備註：**

如果您在 windows / mac 執行 git push -u origin master 出現以下錯誤碼


請嘗試以下指令

git init       //若已經初始化過就可以不用輸入
git add .
git commit -m "first commit"
git remote add origin \[GitHub Repositories Url\]
git branch -M main
git push -u origin main      // 僅限第一次輸入，往後只需要輸入 git push

## 步驟二：執行 `npm run deploy` 來執行自動化部署

當上傳 `main:主要開發分支環境` 後接下來只需要輸入 `npm run deploy` 即可完成 GitHub Pages 部署

## 常見問題

Vite 最下面裡面的 [Readme](https://github.com/hexschool/web-layout-training-vite) 提到很多注意事項，建議先閱讀

### Q1：關機後，如何再開啟 Vite 繼續開發？他會自動監測嗎？

A1: 需將專案資料夾拉進去後，重新打開 VSCode 終端機，再執行 `npm run dev` 指令開啟

### Q2：所謂的製作過程中，終端機要持續打開才會持續運作，我在開發的時候，終端機是否要一直開著？

A2：當輸入 `npm run dev` 指令時，就是執行狀態，開發時就得一直開著

### Q3：在 Vite 運行時，要怎麼在終端機輸入指令？
A3：輸入熱鍵 `ctrl+c`，就可以關閉 Vite 執行狀態

### Q4：我可以改 html、CSS、image 路徑嗎？
A4：不行，因為路徑我們已經寫死

### Q5：這專案只能用 SCSS 寫 CSS 嗎？能純寫 CSS 嗎？

A5：不行，因我們建立的環境是 SCSS 環境

### Q6：當我在使用 Vite 開發、並以 VScode 編譯程式碼時，必須停用 **Live Sass Compiler** 這個套件嗎？

A6：兩者請不要混用，若您用 Gulp，請用 Vite 來編譯 SCSS 即可

### Q7：GitHub Desktop 和 終端機 如何選擇部署上傳？
A7：如果您是用 Vite，建議就用影片教的方式部署更方便