Vue百日学习计划Day19-20天详细计划-Gemini版

重要提示：

  • 番茄时钟： 每个番茄钟为25分钟学习，之后休息5分钟。每完成4个番茄钟，进行一次15-30分钟的长休息。
  • 动手实践： DevTools 的使用和 Git 命令的掌握都需要大量的实际操作。请务必边学边练。
  • 环境准备：
    • 确保您有一个现代浏览器（如 Chrome 或 Firefox）用于学习 DevTools。
    • 提前安装 Git (https://git-scm.com/downloads)。
    • 提前安装 Node.js 和 npm (https://nodejs.org/ - npm 会随 Node.js 一起安装)。可以稍后按需安装 yarn (https://classic.yarnpkg.com/en/docs/install)。
  • 资源利用：
    • Chrome DevTools 文档: https://developer.chrome.com/docs/devtools/
    • Pro Git (中文版): https://git-scm.com/book/zh/v2 (重点看前三章)
    • Learn Git Branching (交互式学习 Git): https://learngitbranching.js.org/
    • NPM 文档: https://docs.npmjs.com/
  • 当前日期： 2025年5月17日

学习目标 Day 19-20：开发工具与 Git

  • Day 19：浏览器开发者工具 (DevTools) 精通
    • 熟练使用 Elements 面板检查和修改 HTML/CSS。
    • 熟练使用 Console 面板进行日志输出和代码调试。
    • 掌握 Sources 面板进行 JavaScript 断点调试。
    • 了解 Network 面板分析网络请求。
  • Day 20：Git 版本控制与包管理器入门
    • 理解版本控制的概念和 Git 的基本工作原理。
    • 掌握 Git 的核心命令，能够进行本地版本管理和与远程仓库交互。
    • 了解 npm/yarn 的作用，并掌握其基础初始化、安装和脚本运行命令。
    • 为阶段项目做好版本控制和包管理的准备。

每日学习计划 (3小时/天)

Day 19: 浏览器开发者工具 (DevTools) 精通

  • 第1个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： DevTools 概览与 Elements 面板 (一)。
    • 内容： 打开任意网页，熟悉 Chrome DevTools 的界面布局。重点学习 Elements 面板：检查 DOM 树、查看和修改元素的 HTML 属性、实时编辑 CSS 样式 (Styles 标签页, Computed 标签页)。
    • 实践： 选中页面上的不同元素，尝试修改它们的文本内容、CSS 颜色、边距等。查看元素的盒模型。
  • 第2个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： Elements 面板 (二) 与 Console 面板 (一)。
    • 内容： Elements 面板：强制元素状态 (如 :hover)，事件监听器查看。Console 面板：使用 console.log(), console.warn(), console.error(), console.table() 等进行信息输出。
    • 实践： 在 Elements 面板找到一个有 hover 效果的按钮并强制其状态。在 Console 中打印不同类型的日志信息，尝试打印一个对象或数组并用 console.table() 查看。
  • 第3个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： Console 面板 (二) - 交互与表达式。
    • 内容： 在 Console 中执行 JavaScript 代码片段，与当前页面上下文交互 (例如，获取 DOM 元素，调用页面中的函数)。
    • 实践： 在 Console 中使用 document.querySelector() 获取页面元素并修改其属性。声明变量，执行简单的计算。
  • 第4个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： Sources 面板 (一) - 查看源码与断点基础。
    • 内容： 学习 Sources 面板如何查看页面的 HTML, CSS, JavaScript 文件。理解什么是断点 (breakpoint) 以及如何在 JavaScript 代码中设置断点。
    • 实践： 找到你之前写的 JavaScript 文件，在某一行代码前设置一个断点。刷新页面或触发相应操作使代码执行到断点处。
    • (长休息: 15-30分钟)
  • 第5个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： Sources 面板 (二) - 断点调试技巧。
    • 内容： 学习调试控制按钮：Resume (继续), Step over (单步跳过), Step into (单步进入), Step out (单步跳出)。查看作用域 (Scope) 和调用栈 (Call Stack)。观察变量的值。
    • 实践： 使用不同的调试控制按钮来逐行执行代码，观察变量在每一步的变化，理解函数调用过程。
  • 第6个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： Network 面板基础。
    • 内容： 了解 Network 面板的作用：监视页面加载的所有网络请求 (HTML, CSS, JS, 图片, XHR 等)。查看请求的 URL, 方法, 状态码, 耗时, 大小。
    • 实践： 刷新一个网页，观察 Network 面板列出的所有请求。筛选不同类型的请求 (如 JS, CSS, Img)。点击某个请求查看其 Headers, Preview, Response 等详细信息。

Day 20: Git 版本控制与包管理器入门

  • 第1个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： 版本控制系统 (VCS) 与 Git 简介。Git 安装与配置。
    • 内容： 理解为什么需要版本控制。Git 的核心概念 (仓库 Repository, 工作区 Working Directory, 暂存区 Staging Area)。确保 Git 已正确安装。进行首次 Git 配置 (git config --global user.name "Your Name" 和 git config --global user.email "youremail@example.com").
    • 实践： 阅读 Pro Git 第一章。在命令行中检查 Git 版本 (git --version) 并完成配置。
  • 第2个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： Git 基本命令 (一): git init, git status, git add, git commit.
    • 内容： 学习 git init 在本地创建一个新的 Git 仓库。git status 查看工作区和暂存区的状态。git add <file> 或 git add . 将文件更改添加到暂存区。git commit -m "commit message" 将暂存区的更改提交到本地仓库。
    • 实践： 创建一个新的项目文件夹，初始化为 Git 仓库。创建一些文件，使用 git add 和 git commit 进行首次提交。多次修改文件并提交，体会工作流程。
  • 第3个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： Git 基本命令 (二): git log, git diff, git clone.
    • 内容： 学习 git log 查看提交历史。git diff 查看工作区与暂存区、暂存区与最新提交、或不同提交之间的差异。git clone <repository_url> 从远程仓库克隆项目到本地。
    • 实践： 查看提交历史。修改文件后不 add，使用 git diff 查看。找一个 GitHub 上的公共仓库，尝试 git clone 下来。
  • 第4个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： Git 分支 (Branching): git branch, git checkout (或 git switch), git merge.
    • 内容： 理解分支的重要性。git branch <branch-name> 创建分支。git branch 查看分支。git checkout <branch-name> (或新命令 git switch <branch-name>) 切换分支。git merge <branch-name> 将指定分支合并到当前分支。
    • 实践： 在本地仓库中创建一个新分支 (如 feature/new-button)，切换到该分支并进行一些修改和提交。然后切换回主分支 (通常是 main 或 master) 并将新分支合并进来。可以尝试在 Learn Git Branching 上练习。
    • (长休息: 15-30分钟)
  • 第5个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： Git 远程仓库交互: git remote add, git push, git pull.
    • 内容： 学习如何关联本地仓库到远程仓库 (如 GitHub)。git remote add origin <repository_url>。git push origin <branch-name> 将本地分支的提交推送到远程仓库。git pull origin <branch-name> 从远程仓库拉取最新更改并合并到本地分支。
    • 实践： 在 GitHub 上创建一个新的空仓库。将本地项目与该远程仓库关联，并将本地的提交推送到远程。如果有协作者，可以模拟拉取操作。
  • 第6个番茄钟 (25分钟学习 + 5分钟休息):
    • 主题： npm/yarn 基础命令: npm init (或 yarn init), npm install (或 yarn add), npm run (或 yarn run).
    • 内容： 了解 npm/yarn 作为包管理器的作用。npm init 初始化项目，生成 package.json 文件。npm install <package-name> 安装依赖包。在 package.json 的 scripts 中定义命令，并通过 npm run <script-name> 执行。
    • 实践： 在项目文件夹中运行 npm init -y 快速生成 package.json。尝试安装一个简单的包 (如 lodash 或 dayjs)。在 scripts 中添加一个简单的命令 (如 "start": "echo Hello"), 然后运行它。

关于阶段项目:

在 Day 20 结束时，您应该已经具备了使用 DevTools 调试代码的基本技能，以及使用 Git 进行版本控制和 npm/yarn 管理项目的基础知识。这些都是开始“阶段项目：使用 HTML, CSS, 原生 JS 实现一个带简单交互的静态页面”所必需的。

项目启动建议：

  1. 创建项目文件夹。
  2. 使用 git init 初始化 Git 仓库。
  3. 使用 npm init -y (或 yarn init -y) 创建 package.json 文件。 即使项目初期不依赖第三方库，这也是个好习惯，方便后续扩展和脚本管理。
  4. 创建你的 HTML, CSS, 和 JavaScript 文件。
  5. 进行初次 Git 提交 (git add ., git commit -m "Initial project setup").
  6. 在开发过程中，频繁使用 DevTools 进行调试，并定期使用 Git 提交你的更改。
  7. （可选）在 GitHub 或类似的平台上创建一个远程仓库，并将你的项目推送上去。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/906522.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Qt初识.

Qt初识.

认识 QLabel 类&#xff0c;能够在界面上显示字符串. 通过 setText 来设置的。参数 QString (Qt 中把 C 里的很多容器类&#xff0c;进行了重新封装。历史原因) 内存泄露 / 文件资源泄露对象树. Qt 中通过对象树&#xff0c;来统一的释放界面的控件对象. Qt 还是推荐使用 new 的…
阅读更多...
WebGPU 图形计算

WebGPU 图形计算

以下是关于 WebGPU 图形计算的基本知识点总结： 一、WebGPU 核心定位与优势 1. 与传统技术对比 维度WebGLWebGPU架构设计OpenGL ES 封装现代图形API抽象（Vulkan/Metal/D3D12）多线程支持单线程渲染多线程并行计算计算能力有限通用计算完整计算管线支持资源控制隐式状态管理显…
阅读更多...
视觉基础模型

视觉基础模型

2.1 视觉的“大模型”时代&#xff1a;ViT的诞生与革新 在计算机视觉领域&#xff0c;卷积神经网络&#xff08;CNN&#xff09;曾是当之无愧的霸主。从LeNet到ResNet&#xff0c;CNN在图像分类、目标检测等任务上取得了巨大成功。然而&#xff0c;随着Transformer模型在自然语…
阅读更多...
【React Native】快速入门

【React Native】快速入门

对于移动端应用来说&#xff0c;开发 Android 应用使用的语言有 java 和 kotlin&#xff0c;开发 ios 应用使用的语言有 obj-c 和 Swift 。因此&#xff0c;我们使用 react-native 编写一套代码进行跨端开发。 构建项目&#xff1a; npx create-expo-applatest安装 nativewin…
阅读更多...
AR 开启昆虫学习新视界，解锁奇妙微观宇宙

AR 开启昆虫学习新视界，解锁奇妙微观宇宙

在传统昆虫学习中&#xff0c;课堂教学是主要方式&#xff0c;老师通过板书、PPT 传授知识&#xff0c;但学生被动接受&#xff0c;书本静态图片无法展现昆虫真实比例、立体形态&#xff0c;学生难以直观感受复杂身体结构。博物馆的昆虫标本也是学习途径&#xff0c;不过标本放…
阅读更多...
BI 大屏是什么意思？具体应用在哪些方面？

BI 大屏是什么意思？具体应用在哪些方面？

目录 一、BI 大屏的定义与内涵 1. 基本概念 2. 核心要素 3. 特点优势 二、如何搭建高效的 BI 大屏 1. 明确需求与目标 2. 选择合适的 BI大屏工具 3. 数据整合与清洗 4. 设计可视化界面 5. 持续优化与更新 三、BI 大屏在企业运营管理中的应用 1. 销售与营销领域 2.…
阅读更多...
Kafka Go客户端--Sarama

Kafka Go客户端--Sarama

Kafka Go客户端 在Go中里面有三个比较有名气的Go客户端。 Sarama:用户数量最多&#xff0c;早期这个项目是在Shopify下面&#xff0c;现在挪到了IBM下。segmentio/kafka-go:没啥大的缺点。confluent-kafka-go&#xff1a;需要启用cgo,跨平台问题比较多&#xff0c;交叉编译也…
阅读更多...
Axure全链路交互设计：快速提升实现能力（基础交互+高级交互）

Axure全链路交互设计：快速提升实现能力（基础交互+高级交互）

想让你的设计稿像真实App一样丝滑&#xff1f;本专栏带你玩转Axure交互&#xff0c;从选中高亮到动态面板骚操作&#xff0c;再到中继器表单花式交互&#xff0c;全程动图教学&#xff0c;一看就会&#xff01; 本专栏系统讲解多个核心交互效果&#xff0c;是你的Axure交互急救…
阅读更多...
自动化测试脚本点击运行后，打开Chrome很久？？

自动化测试脚本点击运行后，打开Chrome很久？？

亲爱的小伙伴们大家好。 小编最近刚换了电脑&#xff0c;这几天做自动化测试发现打开Chrome浏览器需要等待好长时间&#xff0c;起初还以为代码有问题&#xff0c;或者Chromedriver与Chrome不匹配造成的&#xff0c;但排查后发现并不是&#xff01;&#xff01; 在driver.py中…
阅读更多...
现代人工智能系统的实用设计模式

现代人工智能系统的实用设计模式

关键要点 AI设计模式是为现代AI驱动的软件中常见问题提供的可复用解决方案&#xff0c;帮助团队避免重复造轮子。我们将其分为五类&#xff1a;提示与上下文&#xff08;Prompting & Context&#xff09;、负责任的AI&#xff08;Responsible AI&#xff09;、用户体验&…
阅读更多...
经典面试题：TCP 三次握手、四次挥手详解

经典面试题：TCP 三次握手、四次挥手详解

在网络通信的复杂架构里&#xff0c;“三次握手”与“四次挥手”仿若一座无形的桥梁&#xff0c;它们是连接客户端与服务器的关键纽带。这座“桥梁”不仅确保了连接的稳固建立&#xff0c;还保障了连接的有序结束&#xff0c;使得网络世界中的信息能够顺畅、准确地流动。 在面…
阅读更多...
食品饮料行业AI转型趋势分析与智能化解决方案探索​

食品饮料行业AI转型趋势分析与智能化解决方案探索​

一、行业洞察&#xff1a;AI驱动食品饮料行业价值重构​ 当前&#xff0c;食品饮料行业正面临消费分级显性化、需求多元化与技术范式革新的三重挑战。根据《2024食品饮料行业全营销白皮书》&#xff0c;高收入群体倾向于高端化、个性化产品&#xff0c;而下沉市场更关注性价比…
阅读更多...
Electron使用WebAssembly实现CRC-8 ITU校验

Electron使用WebAssembly实现CRC-8 ITU校验

Electron使用WebAssembly实现CRC-8 ITU校验 将C/C语言代码&#xff0c;经由WebAssembly编译为库函数&#xff0c;可以在JS语言环境进行调用。这里介绍在Electron工具环境使用WebAssembly调用CRC-8 ITU格式校验的方式。 CRC-8 ITU校验函数WebAssembly源文件 C语言实现CRC-8 I…
阅读更多...
python如何遍历postgresql所有的用户表

python如何遍历postgresql所有的用户表

要遍历PostgreSQL数据库中的所有用户表&#xff0c;可以按照以下步骤操作&#xff1a; 安装必要依赖库 pip install psycopg2-binary使用标准SQL查询方案&#xff08;推荐&#xff09; import psycopg2def list_user_tables():try:conn psycopg2.connect(host"your_ho…
阅读更多...
面试相关的知识点

面试相关的知识点

1 vllm 1.1常用概念 1 vllm&#xff1a;是一种大模型推理的框架&#xff0c;使用了张量并行原理&#xff0c;把大型矩阵分割成低秩矩阵&#xff0c;分散到不同的GPU上运行。 2 模型推理与训练&#xff1a;模型训练是指利用pytorch进行对大模型进行预训练。 模型推理是指用训…
阅读更多...
node.js如何实现双 Token + Cookie 存储 + 无感刷新机制

node.js如何实现双 Token + Cookie 存储 + 无感刷新机制

node.js如何实现双 Token Cookie 存储 无感刷新机制 为什么要实施双token机制&#xff1f; 优点描述安全性Access Token 短期有效&#xff0c;降低泄露风险&#xff1b;Refresh Token 权限受限&#xff0c;仅用于获取新 Token用户体验用户无需频繁重新登录&#xff0c;Toke…
阅读更多...
MySQL——6、内置函数

MySQL——6、内置函数

内置函数 1、日期函数2、字符串函数3、数学函数4、其他函数 1、日期函数 1.1、获取当前日期&#xff1a; 1.2、获取当前时间&#xff1a; 1.3、获取当前时间戳&#xff1a; 1.4、获取当前日期时间&#xff1a; 1.5、提取出日期&#xff1a; 1.6、给日期添加天数或时间…
阅读更多...
【Linux】Shell脚本中向文件中写日志，以及日志文件大小、数量管理

【Linux】Shell脚本中向文件中写日志，以及日志文件大小、数量管理

1、写日志 shell脚本中使用echo命令，将字符串输入到文件中 覆盖写入：echo “Hello, World!” > laoer.log ，如果文件不存在，则会创建文件追加写入：echo “Hello, World!” >> laoer.log转移字符：echo -e “Name:\tlaoer\nAge:\t18” > laoer.log，\t制表符 …
阅读更多...
深度学习中ONNX格式的模型文件

深度学习中ONNX格式的模型文件

一、模型部署的核心步骤 模型部署的完整流程通常分为以下阶段&#xff0c;用 “跨国旅行” 类比&#xff1a; 步骤类比解释技术细节1. 训练模型学会一门语言&#xff08;如中文&#xff09;用 PyTorch/TensorFlow 训练模型2. 导出为 ONNX翻译成国际通用语言&#xff08;如英语…
阅读更多...
基于两阶段交互控制框架的互联多能系统协同自治优化

基于两阶段交互控制框架的互联多能系统协同自治优化

摘要&#xff1a;从多能源集成系统的效益出发&#xff0c;建立了基于交互控制的双层两阶段框架&#xff0c;以实现互联多能源系统(MESs)间的最优能量供应。在下层&#xff0c;各MES通过求解成本最小化问题自主确定其可控资产的最优设定值&#xff0c;其中滚动时域优化用于处理负…
阅读更多...
最新文章

Copyright @ 2022~2023