【Nuxt3】modules目录和nuxt3模块的简单介绍

简言

记录下nuxt3项目中module的用法

modules目录

使用 modules/ 目录在应用程序中自动注册本地模块。
这是一个很好的地方，可以放置您在构建应用程序时开发的任何本地nuxt模块。

nuxt模块相当于npm包，可以发布到npm社区中

在modules/ 目录下的本地模块，会自动注册模块，无需在 nuxt.config.ts文件中注册。
自动注册的文件模式有：

modules/*/index.ts ,例如 modules/aa/index.ts
modules/*.ts , 例如 modules/one.ts

该目录和其他目录一样，按字母顺序（alphabetical orde）来注册的。

示例

该实例创建了一个名为hello的nuxt模块，然后添加了一个api路由。
启动 Nuxt 时，hello 模块将被注册，/api/hello 路由也将可用。
modules/hello/index.ts ：

// `nuxt/kit` is a helper subpath import you can use when defining local modules
// that means you do not need to add `@nuxt/kit` to your project's dependencies
import { createResolver, defineNuxtModule, addServerHandler } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'hello'
  },
  setup () {
    const { resolve } = createResolver(import.meta.url)

    // Add an API route
    addServerHandler({
      route: '/api/hello',
      handler: resolve('./runtime/api-route')
    })
  }
})

modules/hello/runtime/api-route.ts ：

export default defineEventHandler(() => {
  return { hello: 'world' }
})

nuxt模块

Nuxt 提供了一个模块系统，用于扩展框架核心并简化集成。

使用 Nuxt 开发生产级应用程序时，您可能会发现该框架的核心功能还不够。Nuxt 可以通过配置选项和插件进行扩展，但在多个项目中维护这些自定义功能可能会非常繁琐、重复和耗时。这些可以在模块里使用。

这也是 Nuxt 提供模块系统以扩展内核的原因之一。Nuxt 模块是异步函数，在使用 nuxi dev 在开发模式下启动 Nuxt 或使用 nuxi build 为生产模式构建项目时按顺序运行。它们可以覆盖模板、配置 webpack 加载器、添加 CSS 库并执行许多其他有用的任务。

最重要的是，Nuxt 模块可以在 npm 包中发布。这样，它们就可以在不同项目中重复使用，并与社区共享，从而帮助创建一个高质量附加组件的生态系统。

可以简单理解为nuxt类型的npm包，它可以为项目整体扩展很多内容（css、plugin等）。

配置模块

本地开发的模块可以放到modules目录下。
npm上的需要在nuxt.config.ts配置。

安装模块后，您可以将它们添加到 nuxt.config.ts 文件的 modules 属性下。模块开发者通常会提供额外的使用步骤和细节。

export default defineNuxtConfig({
  modules: [
    // Using package name (recommended usage)
    '@nuxtjs/example',

    // Load a local module
    './modules/example',

    // Add module with inline-options
    ['./modules/example', { token: '123' }],

    // Inline module definition
    async (inlineOptions, nuxt) => { }
  ]
})

例如：
安装 pinia.
首先npm安装pinia和 @pinia/nuxt。
然后在nuxt.config.ts配置使用即可正常使用。

npm install pinia @pinia/nuxt

在这里插入图片描述

开发模块

Nuxt 模块是使用 nuxi dev 在开发模式下启动 Nuxt 或使用 nuxi build 为生产构建项目时按顺序运行的功能。有了模块，您就可以封装、正确测试并以 npm 包的形式共享自定义解决方案，而无需在项目中添加不必要的模板，也无需更改 Nuxt 本身。
官网模块开发指南

我们可以考虑两种 Nuxt 模块：

在 npm 上发布的模块–你可以在 Nuxt 网站上看到一些社区模块的列表。
"本地 "模块，它们存在于 Nuxt 项目本身，或者在 Nuxt 配置中内联，或者作为模块目录的一部分。

在底层，Nuxt 模块定义是一个简单的、可能是异步的函数，接受内联用户选项和 nuxt 对象，以便与 Nuxt 交互。

您可以使用 Nuxt Kit 提供的高层 defineNuxtModule 辅助程序为该函数获取类型提示支持。

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule((options, nuxt) => {
  nuxt.hook('pages:extend', pages => {
    console.log(`Discovered ${pages.length} pages`)
  })
})

官网不建议这样使用，它们建议使用带 meta 属性的 object-syntax 来标识模块，尤其是在发布到 npm 时。

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    // Usually the npm package name of your module
    name: '@nuxtjs/example',
    // The key in `nuxt.config` that holds your module options
    configKey: 'sample',
    // Compatibility constraints
    compatibility: {
      // Semver version of supported nuxt versions
      nuxt: '^3.0.0'
    }
  },
  // Default configuration options for your module, can also be a function returning those
  defaults: {},
  // Shorthand sugar to register Nuxt hooks
  hooks: {},
  // The function holding your module logic, it can be asynchronous
  setup(moduleOptions, nuxt) {
    // ...
  }
})

更多模块使用方法参考官网：nuxt3 moudules guide

结语

结束了。