MUKI space*
Front-end Development,
Effective Note-Taking.
動態渲染 Vue 元件以及動態導入模組，簡化重複邏輯
在開發模組化功能時，使用大量的 v-if 來動態渲染 Vue 元件會導致程式碼重複且難以維護。為了解決這個問題，可以透過動態渲染元件和動態導入模組來簡化邏輯。首先，使用 Barrel Files 將模組集中管理，接著在 App.vue 中根據 moduleId 渲染對應的 Vue 元件，避免用大量的 v-if 判斷。進一步優化可以使用 Vue 的 動態元件搭配 Mapping 表格來渲染模組，這樣可以大幅減少重複的程式碼。
為了進一步簡化，推薦使用 Vite 的 import.meta.glob 功能，這樣可以自動批量導入模組，無需手動更新 Mapping 表格或 index.ts 檔案。透過這種方式，不僅程式碼更簡潔，未來新增或修改元件時只需將新檔案放入目錄即可，無需更改現有邏輯，讓開發和維護更加高效。這種動態渲染方式特別適合需要處理大量條件邏輯的場景。...
Vue3 如何用 defineModel 實作 props / emit 的父子元件傳值，讓傳值變得更方便簡單
Vue.js 開發常用 props 和 emit 傳遞資料，但這方法複雜難維護。Vue3 引入 v-model 簡化操作，讓資料變更自動同步，提升傳遞效率。Vue3.4 推出 defineModel()，進一步簡化 props / emit，是官方推薦寫法。
defineModel() 可傳多個資料，並支持型別與預設值設定。使用 v-model 修飾符時，需解構 defineModel() 回傳值。若出現 defineModel is not defined 錯誤，更新 vue 和 @vitejs/plugin-vue 版本，並修改 vite.config.js 設定。...
在 Vue.js 設定多個入口網址，並顯示對應的網站標題
公司開發網站後台，使用 Vue.js 結合 SPA 開發，無需 SEO。後來因 B 公司需求，增加多個入口網址，並替換登入頁 LOGO。未登入時，訪客會看到不同 LOGO，登入後 LOGO 依 platform 顯示。設定路由匹配同元件，使用 meta.platform 區分 LOGO。網站標題問題透過複製 index.html 為 b.html，修改標題，並用 nginx 指向不同入口解決。這樣可達成多入口網址，且有獨立標題與 LOGO。...
如何在 Vue.js 中不使用 CSS 框架(ex.Element Plus )，自行寫出表格和分頁功能
JavaScript 和 CSS 框架常被用來加速網站開發，但不一定需要使用。Vue.js 可以不依賴 CSS 框架，自行實現表格和分頁功能。首先安裝 vue-router，設定路由。接著可使用假資料或 API 取得資料，並在表格中顯示第一頁內容。使用 vue-router 實現頁碼，透過 query 參數控制頁面顯示。監聽 route.query.page 變化，根據新頁碼更新資料。完整範例可在線上 DEMO 網址查看，提供了無需 CSS 框架的實作方式。...
使用 Element Plus 分頁處理前端的大量資料，並使用工廠函式優化程式碼
通常在網站上顯示大量資料，前端會從後端 API 獲取分頁資料，但若後端未提供分頁功能，可使用 Vue3 與 Element Plus 實現前端分頁。Element Plus 的 el-table 和 el-pagination 元件需自行處理。
利用工廠函式 (Factory Function) 可優化重複的分頁功能。工廠函式可接收參數並返回需要的資料，減少重複程式碼。透過工廠函式建立分頁狀態、處理資料過濾及跳頁功能，達到重用與減少冗餘程式碼的目的。...
不重新整理網頁，讓 Vue3 強制更新當前路由並重新渲染頁面
切換使用者時，可透過 Vue3 的 :key 來強制更新路由，避免使用 window.reload 重新整理頁面。Vue3 利用虛擬 DOM 技術，通過比較新舊虛擬 DOM 的差異，僅更新需要變化的部分，提高效能。
在 <router-view /> 上使用 :key，當 :key 改變時，Vue 會重新渲染該路由。使用 pinia 管理 routeKey，可在任何頁面觸發 routeKey++，達成頁面更新。此方法適合在特定狀態變化時，強制渲染特定頁面。...
Vue3 使用 watch 監聽路由變化，支援瀏覽器的上一頁 / 下一頁按鈕切換
使用 Vue3 可以監聽路由變化，解決瀏覽器「上一頁」「下一頁」按鈕切換時，選單 active 樣式不變的問題。
透過 watch 監聽 currentRoute，每次路由變化時更新 activeIndex，確保選單樣式隨路由變化而更新。...
在 Vite 專案中按需引入檔案，並自訂 chunk 分割代碼
在 Vite 專案中，按需引入檔案可減少不必要的資源載入。使用 Vue Router 的路由懶加載，將每個路由拆分成獨立的 chunk，僅在需要時載入相關檔案。設定 import 動態載入路由，能有效提升效能。
完成路由懶加載後，若發現過大的檔案，可使用 Vite 的 build.rollupOptions.output.manualChunks 手動拆分 node_modules 的 package。對於 element-plus 等框架，使用其內建的按需引入功能。另可透過 vite-plugin-compression 插件進行 gZip 壓縮，減少檔案大小，提升載入速度。...
用 v-html 來載入語系檔案的缺點與解決方案
用 v-html 會導致 XSS 攻擊風險，因為 HTML 標籤直接暴露。為了避免這種風險，可以使用替換參數的方法。將語系中的 HTML 標籤替換為參數，如 ${0}，然後在 template 中使用 標籤來替換參數，這樣可以避免安全漏洞。
這種方法不僅提高了網站安全性，還避免了 console 報錯。建議檢查網站是否有類似問題，並採用這種寫法來增強安全性。...