總目標: 在 Day 21-23 完成 Vue.js 的介紹學習、環境搭建，并成功運行第一個 Vue 3 項目，理解其基本結構。

---

Day 21: Vue.js 介紹與概念理解 (~3 小時)

• 本日目標: 理解 Vue.js 是什么、漸進式框架的概念以及選擇 Vue 的原因。初步了解 Vite 是什么及其作用。

• 所需資源:

  • Vue 3 官方文檔 (介紹): https://cn.vuejs.org/guide/introduction.html
  • Vite 官方文檔 (介紹): https://cn.vitejs.dev/guide/

• 學習計劃:

  • 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

    • 內容: Vue.js 是什么？
    • 活動: 閱讀 Vue 3 官方文檔中“介紹”部分，重點理解 Vue 的定義、核心特性以及它解決的問題。
    • 思考: Vue 與傳統前端開發方式有何不同？
    • 休息: 短暫休息，放松眼睛。

  • 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 漸進式框架概念。
    • 活動: 繼續閱讀 Vue 3 官方文檔“介紹”部分，深入理解“漸進式框架”的含義。它如何體現在 Vue 的使用中？為何這種特性很重要？
    • 思考: 漸進式框架允許你如何使用 Vue？從簡單到復雜？
    • 休息: 短暫休息。

  • 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 為什么選擇 Vue？
    • 活動: 閱讀 Vue 3 官方文檔“介紹”部分，總結 Vue 的主要優勢（易用、性能、靈活等）。與其他主流框架（如 React, Angular）進行簡單的對比（無需深入）。
    • 思考: 在哪些場景下，Vue 可能是一個更好的選擇？
    • 休息: 短暫休息。

  • 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

    • 內容: Vite 介紹及其在 Vue 中的作用。
    • 活動: 閱讀 Vite 官方文檔的介紹部分，了解 Vite 是什么，為什么它比傳統的打包工具（如 Webpack）快，以及它如何用于 Vue 項目。
    • 思考: 為什么 Vue 官方推薦使用 Vite 創建項目？
    • 休息: 短暫休息。

  • 總結與回顧 (10-15 分鐘):

    • 快速回顧今天學習的核心概念：Vue 的定義、漸進性、優勢以及 Vite 的作用。
    • 整理筆記或思維導圖。

---

Day 22: 使用 Vite 創建 Vue 3 項目 (~3 小時)

• 本日目標: 成功使用 Vite 創建一個新的 Vue 3 項目，了解創建過程中的關鍵步驟和選項。

• 所需資源:

  • Vue 3 官方文檔 (快速上手): https://cn.vuejs.org/guide/quick-start.html (重點關注“創建應用”部分)
  • Vite 官方文檔 (快速開始): https://cn.vitejs.dev/guide/ (重點關注“第一個 Vite 項目”部分)

• 學習計劃:

  • 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 準備環境：Node.js。
    • 活動: 確認你的計算機上已安裝 Node.js (版本 >= 16.0)。如果未安裝，根據 Node.js 官網指引進行安裝。了解 npm 或 yarn 或 pnpm 包管理器的基本命令（install, run）。
    • 操作: 打開終端，輸入 node -v 和 npm -v (或 yarn -v, pnpm -v) 檢查版本。
    • 休息: 短暫休息。

  • 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 使用 Vite 創建 Vue 項目 (命令執行)。
    • 活動: 參照 Vue 3 官方文檔“快速上手”中的指令，在終端執行創建 Vue 應用的命令 (npm create vue@latest 或 yarn create vue@latest 或 pnpm create vue@latest)。按照提示選擇 Vue 3 和其他選項（例如，暫時不選擇 TypeScript, JSX, Router, Pinia, Vitest, Cypress）。
    • 操作: 執行創建命令，完成項目目錄生成。
    • 休息: 短暫休息。

  • 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 安裝項目依賴。
    • 活動: 進入新創建的項目目錄。根據官方文檔指引，執行安裝依賴的命令 (npm install 或 yarn 或 pnpm install)。理解這一步的作用是下載項目所需的庫和工具。
    • 操作: 在項目目錄中執行依賴安裝命令。
    • 休息: 短暫休息。

  • 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 運行第一個 Vue 應用。
    • 活動: 參照官方文檔，執行啟動開發服務器的命令 (npm run dev 或 yarn dev 或 pnpm dev)。觀察終端輸出的本地開發地址。
    • 操作: 執行運行命令，在瀏覽器中打開提供的地址，看到默認的 Vue 歡迎頁面。
    • 思考: 為什么執行這個命令就能看到網頁？
    • 休息: 短暫休息。

  • 總結與回顧 (10-15 分鐘):

    • 回顧項目創建和運行的整個流程。
    • 確保項目能夠正常啟動并在瀏覽器中訪問。
    • 記錄遇到的問題及解決方法。

---

Day 23: 項目結構與第一個 Vue 應用初探 (~3 小時)

• 本日目標: 了解由 Vite 創建的 Vue 3 項目的基本目錄結構，理解 createApp 的作用，并初步認識 Vue 單文件組件 (.vue 文件)。

• 所需資源:

  • Vue 3 官方文檔 (快速上手): https://cn.vuejs.org/guide/quick-start.html (重點關注“項目結構”和“應用實例”部分)

• 學習計劃:

  • 番茄時鐘 1 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 項目結構介紹 - 根目錄。
    • 活動: 打開項目目錄，使用 VS Code 或其他代碼編輯器查看文件結構。重點關注 package.json (了解項目信息和腳本命令) 和 index.html (這是應用的入口 HTML 文件)。
    • 探索: index.html 中是如何引入 Vue 應用的？
    • 休息: 短暫休息。

  • 番茄時鐘 2 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 項目結構介紹 - src 目錄。
    • 活動: 探索 src 目錄。理解它是存放源代碼的地方。查看 main.js (或 main.ts 如果選擇了 TypeScript) 和 App.vue 文件。了解 components 目錄的作用 (存放可復用組件)。
    • 探索: main.js 是整個應用的入口文件嗎？
    • 休息: 短暫休息。

  • 番茄時鐘 3 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 第一個 Vue 應用 (createApp)。
    • 活動: 深入查看 src/main.js 文件。理解 createApp 方法的作用：創建一個 Vue 應用實例。理解 .mount('#app') 的作用：將 Vue 應用掛載到 index.html 中 ID 為 app 的 DOM 元素上。
    • 閱讀: 參照 Vue 官方文檔中關于“應用實例”的部分。
    • 休息: 短暫休息。

  • 番茄時鐘 4 (25 分鐘工作 + 5 分鐘休息):

    • 內容: 初步認識 App.vue。
    • 活動: 查看 src/App.vue 文件。認識 .vue 文件是一種單文件組件 (Single File Component, SFC)。了解它通常包含 <template>, <script>, 和 <style> 三個主要塊。初步理解 <template> 中是 HTML 結構，<script> 中是 JavaScript 邏輯。
    • 動手: 嘗試修改 <template> 塊中的一些文本內容，保存文件，觀察瀏覽器中的變化（Vite 的熱模塊更新）。
    • 休息: 短暫休息。

  • 總結與回顧 (10-15 分鐘):

    • 回顧項目結構的關鍵部分 (index.html, main.js, App.vue)。
    • 總結 createApp 和 .mount 的作用。
    • 確保理解 .vue 文件的大致結構。
    • 再次運行項目，嘗試進行簡單的修改并觀察結果。

---

掌握檢查:

• 在 Day 23 結束時，你應該能夠：
  • 獨立使用 npm create vue@latest 命令成功創建一個 Vue 3 項目。
  • 進入項目目錄并使用 npm install 安裝依賴。
  • 使用 npm run dev 啟動開發服務器并看到 Vue 默認頁面。
  • 大概知道 index.html, src/main.js, src/App.vue 這幾個文件的作用。
  • 理解 createApp().mount('#app') 這行代碼的意義。