彈出視窗（Popover，浮動視窗）通常隨著使用者的互動而顯示，它浮動於互動元素的周圍，主要用來提供附加資訊或操作，而不會改變頁面佈局。 <AtomicPopover> 可以作為有「彈出...
頁籤（Tabs）是一個很常見的 UI 元件，它可以讓使用者在內容上有關聯但屬於不同類別的資料或畫面之間切換。例如，我們可以用它來切換「娛樂」、「科技」、「股市」等不同分類的新聞列表；也可以用它來切換...
在 ERP 系統的列表頁面或部落格文章的總覽頁面，如果我們想要一次顯示大量資料，不僅會耗費大量的網路傳輸流量，也會使瀏覽器渲染畫面變得緩慢費時。為了解決這個問題，我們可能會選擇使用分頁的方式載入資料...
麵包屑導覽列（Breadcrumb）是一種常見的導航元件，其名稱源自格林童話《糖果屋》，故事中兩兄妹用麵包屑標記回家的路徑。在網站中，麵包屑導覽列起到了類似的指路功能，用於顯示使用者在網站中的位置，...
按鈕在網頁中是最常見的元件之一，這個元件通常在使用者點擊後會觸發程式上的操作，可能是關閉或打開 Modal，也可能是送出表單，又或是刪除某些重要資料等等。 在 UI 表現上，按鈕會依照不同的情境而有...
連結（Link）在網站開發中是不可或缺的存在。為了讓我們更好的實現 SPA（Single Page Application）網站，我們通常會使用 Vue Router 作為路由管理的解決方案。 元件...
身為前端工程師，元件管理是不論選用哪一個前端框架的開發人員都需要面臨的挑戰。能不能妥善規劃與管理元件，很大程度上決定了專案未來的走向。好的元件規劃可以讓開發更有效率，反之，如果沒有妥善應用元件或是濫...
Vuex就是把資料拉出來，統一在外部存取，不需用props或emmits傳來傳去。啟用Vuex後會多一個\src\store\資料夾，其中index.js可以定義各種資料的存取
一個典型的 Vue 專案結構由多個文件和文件夾組成，它們一起定義了應用的組件、路由、狀態管理、樣式等。Vue 3 使用 Vue CLI 或 Vite 等工具來生成專案模板。下面就來介紹一個標準 Vue...