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.pswp.cn/news/906522.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/906522.shtml
英文地址，請注明出處：http://en.pswp.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