modules - 目录结构 - Nuxt 中文文档 v3

Maschinelle Übersetzung ·0 % geprüft

这是放置你在构建应用时开发的本地模块的好地方。

自动注册的文件模式包括：

modules/*/index.ts
modules/*.ts

你不需要在 nuxt.config.ts 中单独添加这些本地模块。

// `nuxt/kit` 是一个辅助的子路径导入，用于定义本地模块时使用
// 这意味着你不需要将 `@nuxt/kit` 添加到你的项目依赖中
import { addComponentsDir, addServerHandler, createResolver, defineNuxtModule } from 'nuxt/kit'

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

    // 添加一个 API 路由
    addServerHandler({
      route: '/api/hello',
      handler: resolver.resolve('./runtime/api-route'),
    })

    // 添加组件
    addComponentsDir({
      path: resolver.resolve('./runtime/app/components'),
      pathPrefix: true, // 给导出添加前缀，以避免与用户代码或其他模块冲突
    })
  },
})

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

启动 Nuxt 时，hello 模块会被注册，且 /api/hello 路由将可用。

请注意，所有本来会放在你的 app/ 目录中的组件、页面、composables 和其他文件都需要放在 modules/your-module/runtime/app/ 中。这样可以确保它们被正确地进行类型检查。

Modules 按以下顺序执行：

首先，加载 nuxt.config.ts 中定义的模块。
然后，执行 modules/ 目录中找到的模块，并按字母顺序加载。

你可以通过在每个目录名的前面添加数字来更改本地模块的加载顺序：

目录结构

modules/
  1.first-module/
    index.ts
  2.second-module.ts

Weitere Informationen findest du unter Docs > Guide > Modules.

观看 Vue School 关于 Nuxt 私有模块的视频教程。