一個工程師的筆記天地

# 前言 標題又出現了一個看起來很難懂的專有名詞：狀態。 這篇文章來聊聊 Vue 的「狀態」是什麼意思。 在開始說狀態之前，先簡單說一下 setup() 生命週期鉤子。 # setup() 再把那個最初的範例請出來 Vue.createApp({ setup() { const message = '一段文字' return { message } },}).mount("#app");還記得之前把 createApp...

# 前言 歷經那麼多天的廢話，終於可以進入重頭戲，來學習怎麼發布一個版本吧！ 記得在建立 Git 儲存庫的文章中有提到，如果要發布一個版本，會歷經把檔案放到 暫存區，再把 暫存區 的檔案提交到 儲存庫 兩個階段。 言下之意，我們會使用「兩個」指令來提交一個版本。 老樣子，指令介紹完再說明 Fork GUI 操作。 給立志成為指令派的讀者：在 Fork GUI 最後有補充一個指令細節，建議也可以讀一下 Fork 的部分。 # 提交一個版本 # 第一步：將檔案加到暫存區 初始化儲存庫 ( git init ) 之後，即便已經有了地端儲存庫 ( .git )，Git...

# Vue 的核心 這個主題寫在這篇其實有點「晚」了 不過也因為寫在這篇，相信有追完前面幾篇的讀者，已經能體會 Vue 有多「漸進」了。 之前有提到，尤大大當初只是想使用「一部分」框架的功能，卻要引入「整個」框架，覺得很麻煩。 於是在設計 Vue 的時候，讓大家可以做到「小專案引入核心功能」，如果有需要再引入更多功能，後面帶到「路由 (Routing)」、「狀態管理器 (Pinia)」就是個例子。 而上段提到 Vue 的核心功能，其實大家已經認識了： 「宣告式渲染」、「元件系統」。 # Vue 實體 我們再把那個一直用到的例子搬出來看： 如果你想線上玩，我放這裡 <div...

# 前言 這篇文章要來說明「建立儲存庫」的操作，讓大家對 地端儲存庫 與 遠端儲存庫 有更進一步的認識。 以「基特平台」例子來說，建立儲存庫的概念，就是要在商家的銷售網站上面「建立帳號」，帳號存有專屬於這個商家的「購物車」跟「已購買清單」。 換言之，我們準備來對「工作目錄」動手腳，讓 Git 在這個資料夾內建立「暫存區」跟「儲存庫」。 本文的目的只有一個，學會 git init 這個指令的用意。然後就沒有然後了 # 建立本地的儲存庫 建立本地儲存庫，具體來說是要在「工作目錄」建立 .git 隱藏資料夾。 接下來會分別說明 指令 與 Fork GUI 的操作方式。 GUI 派的讀者可以直接跳到...

歷經了前面幾篇文章，讀者大概已經對框架有最基本的認識， 我們來 “Get our hands dirty”，開始寫扣吧！ # 建構 Vue 框架的幾種方式 建立起 Vue 的開發環境有幾種方式 # 透過 CDN 使用 Vue 如同我們學習 jQuery 一樣，CDN 是我們的好朋友。 透過這個老友一樣可以讓我們享受到 Vue 的美好： <script...

# 前言 這篇來說明要使用 Git 前「一定」要做的事情：設定使用者名稱、信箱。 以及可以選擇性操作的：設定 Git 預設文字編輯器。 # 設定 Git 的使用者名稱與信箱 # 用指令更改： 我們開啟終端機，並且透過下面兩個指令來設定 Git 使用者資訊。 (建議兩個指令「分開複製」到終端機執行) git config --global user.name "這裡改你的名字"git config --global user.email "這裡改你的信箱"實際輸入的內容看起來會像這樣： git config --global user.name...

# 前言 上一篇文章，已經大概說明為什麼會需要使用框架，同時也大概說了為什麼要寫 Vue 這篇文章，來聊聊原生 JS 跟 Vue 的比較吧 雖然上一篇好像在嘴這件事，不過這方式真的很容易能看到框架的優點 # Vue 幫做了什麼事情？ 如果你已經有學過原生 JS 控制 Dom 的運作，那大概看得懂這段 code 在做什麼事情： <div class="message"></div>const $message =...

# 前言 到了目前為止，大家應該對於 Git 已經有基本的認識，並且知道 Git 是一套在自己電腦就能運作的軟體。 這篇文章，一起來安裝 Git ，以及 Git GUI 工具吧！ # 安裝 Git # 在 Windows 系統安裝 Git 在 Windows 環境安裝 Git ，其實無腦下一步就能裝好，不過筆者想帶大家認識每一步在做的事。 由於步驟之繁雜，如果是想節省時間 懶得看 的讀者，只要稍微注意 「第六步」 、 「第八步」 的設定，其他步驟都可以直接點下一步，直到安裝完成即可。 請先進入 Git 的官網，找到下面這個按鈕點進去。 可以直接點擊「click here to...

# 聊聊框架 所以到底為什麼要 逼我們 學框架？ 這個問題其實已經有很多前輩寫了很詳細的文章做說明，這邊分享兩篇我覺得很不錯的文章給大家參考。 談談前端框架 為什麼要使用框架 - 你聽過最好的答案是什麼？ 直接說結論，因為年代需求的不同，所以我們需要框架，，全文完。。 沒事，我開玩笑的，先不要走。 筆者認為這個問題很值得去探討，有人會因此拿香草 JS 註 1 的範例，跟前端框架比較，呈現出用一樣的功能，用框架寫兩行 code 而香草 JS...

# 前言 上一篇文章已經先了解版控系統的分類，並且知道 Git 屬於分散式版控系統。 開始使用 Git 前，筆者想先用「網購」的例子引領大家進入 Git 的版控世界。 # 用「網購下單」的例子來學 Git 相信大家在這個嚴峻的時代，都已經有網購的經驗。 如果我說，從購物網站「挑選商品」一直到「下單」的行為，跟 Git 的觀念有點像…...