在開始製作 Module 之前可以想想元件想在 Module 中怎麼呈現

比如我希望：

1. 透過 demo 路徑可以進到元件展示的頁面
2. 使用者直接安裝可以使用我預設的主題色彩，但也可以讓他自定義主題色

因此我需要：

• 在 page 底下新建一個 demo 資料夾，並將原本底下的頁面移動到 Demo 資料夾

並在 pages 裡面建立一個 demo.vue 的檔案，將原本寫在 app.vue 的部分移過去~

在 definePageMeta 中設定 layout: false 可以針對不同頁面套用不同的 layout

<script setup lang="ts">
definePageMeta({
  layout: false
})

useHead({
  title: "DEMO"
})
</script>
<template>
  <NuxtLayout name="demo-layout">
    <NuxtPage />
  </NuxtLayout>
</template>

• 建立 assets/css/style.css，之前創元件時為了方便都將 style 寫在裡面，但這樣會在元件使用時重複下載，因此對於共用 css 的部分可以獨立成一個檔案一次載入。
  可以直接整理成一包一次引入，也可以分門別類建立檔案，例如 button 有自己的 button.css，最後全部 import 到 index.css，這樣子分開管理也便於未來管理。

  移動完要記得到 nuxt.cofig 設定 css ~

  export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: [
      '@nuxt/icon',
      '@nuxtjs/tailwindcss'
    ],
    css: [
      '@/assets/css/style.css'
    ]
  })
  

• 最後再幫網頁加一個 favicon~

  建立 public 資料夾，把想要當作 favicon 的圖片放進去 (比如我丟了一張 seal.ico )

  再到 nuxt.config 設定

  app: {
      head: {
        link: [
          { rel: "icon", type: "image/png", href: "/seal.ico" }
        ]
      }
    }
  

  網頁重新整理之後就會出現嚕，如果沒有出現先清除網頁的暫存後重新整理，或是檢查圖片的路徑

  

• 接下來就可以開始準備做 module 嚕~