終於寫到最後一天了(灑花)

完成了熱騰騰的 module 後就開始來安裝囉！

step 1: 首先安裝 nuxt

npx nuxi@latest init <project-name>

step 2: 接下來直接裝上 module 吧！

npm i @feifeiseal/seal-module

step 3: 並在 nuxt.config.ts 設定 module

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@feifeiseal/seal-module'],
})

step 4: 如果要直接看到做好的展示頁面，要加上一個 pages/index.vue 資料夾，並將 app.vue 改成

//app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>

step 5: npm run dev見證奇蹟的時刻～

不出意外的話！！！

果然會出意外…

整個跑版了！

開啟 F12 檢查會發現 tailwind 並沒有掃描到製作的 module

之前設定的 content 在安裝到環境後沒有生效 😱

  // 之前的 tailwind.config.js
  content: [
    './src/runtime/components/**/*.{vue,jsx,tsx}',
    './src/runtime/pages/**/*.{vue,jsx,tsx}',
    './src/runtime/layouts/*.{vue,jsx,tsx}',
  ],

所以這邊需要重新調整一下 content 的設定

我們可以直接將路徑指向 node_modules 內的模組，但這樣子的話在 src/runtime 的開發情境下會無效

變成模組內的 tailwind.config.js 要寫的非常長來解決這件事情

  content: [
    './src/runtime/components/**/*.{vue,jsx,tsx}',
    './src/runtime/pages/**/*.{vue,jsx,tsx}',
    './src/runtime/layouts/*.{vue,jsx,tsx}',
    './node_modules/@feifeiseal/seal-module/**/*.{vue,js,ts,jsx,tsx}'
  ],

step 6: 接下來要更新版本號 e.g. 1.0.0 => 1.0.1

step 7: 重新打包發布

npm run prapack  //打包

npm publish --access public //發布

step 8: 接著就可以到環境端安裝試試看囉！

 npm i @feifeiseal/seal-module

之前發布不成功的版本，也可以試試看把它刪除掉～

//強制刪除指定版本，刪除後不能重複推同一個版號
npm unpublish @feifeiseal/seal-module@1.0.0 --force

尾聲

建立 Nuxt 模組的過程可說是一段漫長的旅程。從一開始官方文件不夠完善，到現在有了完整的教學影片，期間踩了無數的坑，才逐步打造出理想的模組。

在解決問題的過程中，雖然充滿曲折，但當最終成功推出時，成就感真的滿滿！學習的路上也很感謝我的 mentor/上司還有我的前輩/同事/老大，平常不好意思說，這裡偷偷謝謝 :D

最後提供本次實作產生的相關連結：

npm: https://www.npmjs.com/package/@feifeiseal/seal-module?activeTab=readme

git: https://github.com/FeiFeiSeal/nuxt-seal-module

做一個自己的 module 吧！