沒特殊要求的項目，還是怎么簡單怎么來╮(╯▽╰)╭

一、Vite 基礎知識

1. 什么是 Vite？

• Vite 是一個前端構建工具，專注于開發服務器速度和優化構建過程。
• 特點：
  • 快速冷啟動：利用 ES 模塊的原生支持，實現快速的開發服務器啟動。
  • 即時熱更新：在開發過程中，修改代碼后可以立即看到效果，無需等待重新構建。
  • 高效的構建：使用 Rollup 進行生產構建，生成高效的打包文件。

2. Vite 的主要優勢

• 快速開發：冷啟動時間極短，開發體驗極佳。
• 熱模塊替換（HMR）：代碼修改后立即更新，無需刷新頁面。
• 按需加載：僅在需要時加載模塊，減少初始加載時間。
• 現代構建：利用現代瀏覽器特性，提供高效的構建和優化。

3. Vite 的工作原理

• 開發服務器：
  • 使用 ES 模塊的原生支持，通過 HTTP 服務器提供模塊。
  • 支持熱模塊替換（HMR），實現即時更新。
• 生產構建：
  • 使用 Rollup 進行代碼打包。
  • 支持 Tree-shaking、代碼分割等優化技術。

---

二、Vite 的安裝和使用

1. 安裝 Node.js

• Vite 需要 Node.js 環境，建議使用最新版本的 Node.js。

  # 檢查 Node.js 版本
  node -v
  # 安裝 Node.js：https://nodejs.org/
  

2. 創建 Vite 項目

• 使用 Vite CLI 創建項目：

  # 使用 npm
  npm init vite@latest my-vue-app --template vue# 使用 yarn
  yarn create vite my-vue-app --template vue
  

3. 安裝依賴

• 進入項目目錄并安裝依賴：