為什麼要做 module 組件？

最近在進行一些專案或練習時，經常發現自己需要重複製作相同的元件，或者不得不從舊專案中複製貼上相應的元件。

然而，這些元件通常不僅僅是單一的組件，還可能涉及到與 plugins、composables 的結合，甚至可能會引用其他元件。當這樣的情況累積到一定程度時，維護和重複使用這些元件就會變得相當麻煩，也難免讓人感到有些麻煩。 (其實就是有點懶惰)

為了提升開發效率並減少這種重複造輪子的行為，我決定將常用的元件整合成 Module。這樣在未來遇到相似需求時，就可以直接引用這些 Module，避免每次都要從頭開始製作，讓開發流程更加順暢和高效。

在接下來的 29 天裡，我會製作一些小元件，並逐步將它們模組化。最終，我將實現一個功能，讓使用者可以在本地端自行更改主題色。如果你已經具備一定的 Vue 、Nuxt、TypeScript 、Tailwind 基礎，那麼就讓我們一起開始這個過程吧！過程中如果有誤也很歡迎留言指教 :3

目錄

1. 前言
2. 安裝 nuxt-icon
3. 元件製作 button
4. 元件製作 input
5. 元件製作 select
6. 元件製作 checkbox
7. 元件製作 radio
8. 元件製作 switch
9. 元件製作 tab
10. 元件製作 tooltip
11. 元件製作 layout
12. 元件製作 layout -part.2
13. 元件整理
14. 安裝模組工具
15. installModule
16. createResolver & addComonent
17. tailwind 與 css 設定
18. addPlugin
19. addComponentsDir
20. 放入 public 資料夾
21. extendPages
22. extendPages-快速加入頁面
23. addLayout
24. addServerHandler & alias
25. addImportsDir
26. 自訂義主題
27. module options 設定
28. transplie 與 #import
29. npm 與 package.json
30. 安裝與修改