一個工程師的筆記天地

# 前言 傳統網頁的網址，以往會是後端根據不同的頁面去配置不同的網址規則。 不過如果要使用 Vue 框架開發網頁，會是「單一頁面網站」 (Sigle Page Application)，俗稱的 SPA，就是說我們就只會有「一個頁面」。 這種狀況下沒辦法靠後端定義資料夾去控制路由，處理路由的工作就變成 Vue 的事情。 Vue 為此提供 Vue Router 的工具讓我們加裝在 Vue 應用程式中，讓我們可以處理路由。 這篇文章將簡單介紹 Vue Router 的基本使用方式 # 安裝 Vue Router Vue 官方提供兩種 Vue Router 的使用方式 直接使用...

# 前言 在分支觀念篇的文章中有介紹過，如果已經合併過的分支，即便刪除了也不會影響整個線圖，雖然當初是在講「地端分支」的觀念，但這個觀念其實也適用於「遠端分支」。 不過我們也曾經說過，地端分支跟遠端分支是要分開看待的，所以要刪除的分支如果也存在於遠端，那麼即便地端分支已經被刪除，遠端的分支並不會因此自動被刪除，我們會需要額外處理「刪掉遠端分支」這件事。 這篇文章，來說明如何刪除遠端分支，以及遠端分支被刪除之後，團隊成員需要注意的小地方。 # 刪除遠端分支 刪除遠端分支的方式，一樣是使用 git push 指令，只要在使用指令時多加一個 --delete 即可。 git push origin...

# Vite 的簡易介紹 之前所有的操作項目，都是直接使用 CDN 引入 Vue 之後進行開發，這種做法在一個小型的應用程式足以感受到 Vue 的方便性。 不過一個大型的網頁應用程式如果這樣開發，DX (開發者體驗) 其實並不會太好，通常前端框架都會有相對應的 CLI 工具讓開發者在使用框架時體驗可以更好一些。 Vite 是 Vue 的作者尤雨溪大大所建構出來的前端建構工具，這種工具也有人把它稱為「腳手架」、「鷹架」等，用意是協助開發者建構一個適合開發的環境，以及先處理好基本的架構。 在 Vite 問世之前，Vue 的建構工具是 Vue...

# 前言 先前的內容，我們已經學會如何操作「單一分支」在地端與遠端的資料處理了，不過一個專案不會只有一條分之在運作，推到遠端的分支也不太可能只有一條。 事實上，即便遠端儲存庫有數十條分支，我們使用 git clone 指令把專案拉回地端使用時，也只會把主要分支的內容拉回來。 那麼如果需要使用其他的分支，該如何將他從遠端拉回地端使用呢？ 除了這個問題之外，或許還會遇到另一個問題：我們在地端又怎麼能知道遠端到底紀錄了幾條分支呢？ 一切的內容將會在這篇文章介紹。 進入今天的主題 地端分支、遠端分支、遠端追蹤分支 # 前置作業 假設我們在「地端儲存庫」有六個分支 $ git branch...

# 前言 不知道大家在開始使用元件的時候有沒有一個疑惑，明明元件在模版中的寫法跟一般的 HTML 標籤沒兩樣 <my-component></my-component>但我們如果試著在裡面添加文字，卻不會有任何效果 <my-component>這句話寫在這裡不會呈現在畫面上</my-component>原因其實是元件的內容，會是由定義元件時所寫的 template...

# 前言 之前的內容都是在地端儲存庫版控的行為，不過如果需要與團隊成員合作版控，我們會需要有一個「遠端儲存庫」，而 GitHub 應該算是一個蠻常聽到的遠端儲存庫了，接著將以 GitHub 作為遠端儲存庫來說明地端資料與遠端資料的操作。 不管是 GitHub ，或是其他的 Git 遠端儲存庫 (GitLab 、TFS 等)，在地端指令的操作上並沒有什麼差異，使用不同儲存庫唯一有感的差異，應改只有「遠端儲存庫」提供的「介面」長得不同而已。 我們在學習的角度，GitHub 網頁上的操作倒是其次，畢竟「不是所有團隊都是使用 GitHub...

# 動態元件 網頁中有一種常見的功能，是能做到某個區塊可以點選畫面中的按鈕 (或標籤) 進行資料的抽換，這種功能在電商網站就很常會看到。 在 Vue 中要實踐這種功能，最直覺的方式可能是用 v-if 來達成。 首先在 Vue 中宣告幾個元件，當作要動態切換的內容，接著在實體宣告一個變數，準備用來讓 v-if 判斷顯示與否的用途。 const app = Vue.createApp({ setup() { const appear = Vue.ref("A"); return { appear, };...

# 前言 話說在前頭，如果進到這篇文章的你還跟 Git 不太熟，目前的你執行了 git commit 之後反悔了，想要把它刪掉卻不知道怎麼刪的話，請左轉參考 git reset 文章，可能比較符合你現階段想完成的事情。 因為 git revert 指令執行下去可能會跟你想的結果完全不一樣。 會以這樣的言論當作開場，就是因為筆者小弟不才本人我，在不熟 Git 的時期想要「刪除」最新的 commit，看到有個 git revert 可以取消 commit，糊里糊塗就給他用下去。 git revert...

# 前言 之前提到，元件如果要接收資料，必須用 props 元件如果要向外傳資料，則是定義 emit 事件 假設我們的元件有個 <input> 標籤，我們希望元件內部的 <input> 可以跟外部的資料做到雙向綁定，那們根據之前提到的寫法，可能會這樣寫： const app = Vue.createApp({ setup() { const message = Vue.ref("hello"); const updateMsg = (val) => {...

# 前言 上一篇文章聊到 rebase 可以用來把分支連根拔起，重新栽種到某個分支上。 而這個重新摘種的方式，會把拔起來的分支線所有 commit 內容全部重新 commit 一次。 這也代表說，我們可以用 rebase 做到：「不要將分支移花接木，但全部幫我重新 commit」，這樣就可以達到「修改歷史資料」的目的。 之前在 --amend 章節有提到，如果要修改歷史的 commit ，牽一髮就會動全身，就很像 rebase 在做的事情，而這篇文章的內容，就是要來說說如何使用 rebase 來修改歷史資料。 老樣子，指令講完講 GUI，觀念會在指令說 雖然今天的內容寫完指令…...