在寫前端之前，最讓人卡關的往往不是語法，而是專案怎麼開始
檔案一堆、指令一堆，不知道哪些重要、哪些可以先忽略

Vite 的好處就在於，它幫你把起跑線整理好，你只要專心往前跑
今天這一篇，我們只做三件事
建立專案、跑起來、看懂結構

ㄧ. 為什麼現在前端都用 Vite

以前常見的痛點是專案建立很慢、啟動要等很久
改一行程式，畫面要等半天才更新

而Vite 的開發體驗是，存檔後畫面幾乎立刻變
對新手來說，學習節奏會順非常多

二. 用 Vite 建立專案

建立專案

npm create vite@latest

接下來它會問你幾個問題：
專案名稱
使用的框架（Vanilla / Vue / React…）
要不要 TypeScript

安裝套件並啟動

cd 專案名稱
npm install
npm run dev

終端機會出現一個網址（通常是 http://localhost:5173）
打開後，看到畫面代表成功了！

三. 第一次看 Vite 專案資料夾不迷路指南

package.json
這是專案的核心設定檔
之後會常看到的指令：

npm run dev：開發模式
npm run build：打包成正式版本
npm run preview：預覽打包後的結果

index.html
即使是 Vue / React 專案，這個檔案依然存在
它是整個前端畫面的入口，Vite 會從這裡把 App 掛上去

src 資料夾
之後大部分時間都會待在這裡
畫面、元件、樣式、邏輯，幾乎都在 src 裡

main.js / main.jsx / main.ts
這是把 App 真正渲染到畫面上的入口檔
可以把它想成「啟動點」