iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

蓋一個自己的 Nuxt 3 UI Module 系列

厭倦每次都要重複造輪子刻元件的過程了嗎!?
那把他 module 化吧!

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 21

extendPages

經過了前面的過程,感覺 module 已經完成的 七七八八了! 但我想讓他更完整一點~讓元件有展示的頁面,方便未來在引入元件時有預覽的效果,就像安裝 taili...

2024-10-02 ‧ 由 豹告 分享
DAY 22

extendPages-快速加入頁面

昨天成功引入了 button 元件的頁面 👍 回過頭來看看還有 12345…..好多個頁面要引入呀……一個一個引入感覺有點麻煩…… (:3 」∠ ) 可惜目前沒...

2024-10-03 ‧ 由 豹告 分享
DAY 23

addLayout

昨天成功的引入了元件的展示頁,接下來就要引入有 layout 的父頁面 demo.vue ,將展示做得更完整~ 第十二天的完成狀態 step 1: 引入 a...

2024-10-04 ‧ 由 豹告 分享
DAY 24

addServerHandler & alias

addServerHandler 在之前的實作當中,我把 sidebar 內的項目移出來到 server/api/sidebar-item.ts 模擬透過 ap...

2024-10-05 ‧ 由 豹告 分享
DAY 25

addImportsDir

當使用者填寫表單並按下提交按鈕時,我們需要檢查他們的輸入內容,以確保資料的正確性。 這包括確認欄位是否為空白、檢查輸入是否符合預期的格式與規則等等。這類檢查屬於...

2024-10-06 ‧ 由 豹告 分享
DAY 26

自訂義主題

在建立模組後,讓使用者可以自定義顏色是一個很實用的功能 !因為每個專案可能都會需要不同的的主題色。 在這邊我設定讓使用者在環境內設定 tailwind.conf...

2024-10-07 ‧ 由 豹告 分享
DAY 27

module options 設定

之前有簡單介紹過 module.ts 內有個 interface 是定義給使用者的模組自訂選項類型,它的名稱對應的是在 defineNuxtModule 傳入的...

2024-10-08 ‧ 由 豹告 分享
DAY 28

transplie 與 #import

在準備發布 module 之前有一件很重要的事情! 官方在 **Module Author Guide** 提到 Published modules cann...

2024-10-09 ‧ 由 豹告 分享
DAY 29

npm 與 package.json

接下來就是要發布 npm 的時候啦! step 1: 還沒有 npm 帳號的話先註冊一個~ step 2: 登入 npm npm login 接著會提示按下...

2024-10-10 ‧ 由 豹告 分享
DAY 30

安裝與修改

終於寫到最後一天了(灑花) 完成了熱騰騰的 module 後就開始來安裝囉! step 1: 首先安裝 nuxt npx nuxi@latest init &l...

2024-10-11 ‧ 由 豹告 分享