总目标: 在 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') 这行代码的意义。