Hero Image
Nuxt

Nuxt3 Nuxt 前端，整合 Net 後端全站開發筆記 專案準備 git clone 手動指令安裝 pnpm 安裝相依套件：pnpm install 建立正式編譯檔：pnpm run build 啟動開發伺服器：pnpm run dev pnpm啟動完畢 專案設定的 url 是 設定完畢後，pnpm run dev 開發伺服器完畢，可使用F5 啟動偵錯 測試帳號準備與登入 檔案結構目錄 共同開發說明>開發注意事項>前端開發>檔案結構目錄 撥空了解 Nuxt 結構目錄 https://clairechang.tw/2023/07/07/nuxt3/nuxt-v3-directory-structure/ 請深入閱讀必要了解項目 pages/、layouts/、components/ → 頁面結構與 UI 組合 composables/ → 邏輯封裝、狀態管理 plugins/、middleware/ → 應用啟動與權限控制 stores/ → 使用 Pinia 管理狀態 檔案結構目錄-components component/{pages Name} 作為子元件與父元件 ( pages.vue ) 溝通使用 抽離元件邏輯，避免 pages/{router}/{subRouter}.vue 理由: 行數過多不好閱讀: SOLID 的第一條，SRP ，一個模組不應處理過多事情 頁面可以精簡僅負責整合 api 回傳與 UI 顯示、pages/*.vue 行數控制在 300 行以內。

Thursday, November 27, 2025 | 6 minutes Read
Hero Image
Typora

Typora a nice .md file editor IDE 撰寫者：Amanda Chou 日期：2025/04/17 .md ? md 是什麼? Markdown 文件的副檔名 Markdown 又是什麼? Markdown ? **Markdown **是一種輕量級標記式語言，創始人為約翰·格魯伯。 使用易讀易寫的純文字格式編寫文件，然後轉換成有效的XHTML（或者HTML）文件。 這種語言吸收了很多在電子郵件中已有的純文字標記的特性。 輕量化、易讀易寫特性，並且對於圖片，圖表、數學式都有支援 Markdown 用途廣泛 目前許多網站都廣泛使用Markdown來撰寫說明文件或是用於論壇上發表訊息。如GitHub、Reddit、Discord、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、簡書等，甚至還能被用來撰寫電子書。 之前介紹的 Vue 文件 重新認識 Vue.js | Kuro Hsu git book 也是 深入淺出 GitBook 寫作與自助出版，電子書也能多人協作 HackMD 也是 小題大作的30個 HackMD 技巧 現在演示的這個投影片也是 md fille 怎麼變 slide? 後面針對匯出章節會提到 Why Markdown 輕量易用：Markdown 語法簡單直觀，幾乎無學習成本。(幾乎沒有，但還是有一點，語法還是需要熟悉一下) 高度可移植：Markdown 文件是純文字格式，可以在任何平台上查看或編輯，方便與版本控制工具，適合開發者和團隊協作。 多用途輸出：支援導出為 PDF、HTML、Word、Slides 等多種格式。特別適合技術文件、筆記、部落格文章等用途。 多輸出主要是依賴 Pandoc 工具支援，後面針對匯出章節會提到 強大的生態系統：可擴展性強，支持 LaTeX（數學公式）、圖表（如 mermaid.js）、代碼高亮等功能。 開放性標準：Markdown 是一種開放格式，無專屬軟體依賴，確保文件長期可讀。 參考: 寫作＆筆記神器 MarkDown 真希望我學生時期就懂 分享了 dillinger, Typora 還有影片介紹 Why Markdown 只要可以版控，就會好找很多 如果有要找，版控，就會好找很多

Thursday, April 17, 2025 | 4 minutes Read
Hero Image
Introduction

This is where I document my work experiences and technical reflections, with a focus on software development, system architecture, DevOps, and real-world problem solving. Every article comes from issues encountered in actual projects: the pitfalls I ran into and the solutions I found. I hope this helps my future self review things more efficiently, and also saves you some detours if you are facing similar problems. All articles are currently written in Chinese. If you are viewing this site in a multilingual interface, please switch the site language to “Chinese” to see the full list of posts and category index.

Monday, June 8, 2020 | 1 minute Read
Hero Image
Shortcodes Samples

This is a sample post intended to test the followings: Default hero image. Different shortcodes. Alert The following alerts are available in this theme. This is sample alert with type="success". This is sample alert with type="danger". This is sample alert with type="warning". This is sample alert with type="info". This is sample alert with type="dark". This is sample alert with type="primary". This is sample alert with type="secondary". Image A sample image without any attribute. A sample image with height and width attributes. A center aligned image with height and width attributes. A image with float attribute. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. Praesent tellus risus, eleifend vel efficitur ac, venenatis sit amet sem. Ut ut egestas erat. Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. Suspendisse nec ipsum eu erat finibus dictum. Morbi volutpat nulla purus, vel maximus ex molestie id. Nullam posuere est urna, at fringilla eros venenatis quis.

    Monday, June 8, 2020 | 3 minutes Read