Nuxt 目录结构

了解 Nuxt 应用程序的目录结构及其用法。

Nuxt 应用程序具有特定的目录结构,用于组织代码。此结构旨在易于理解并以一致的方式使用。

根目录

Nuxt 应用程序的根目录是包含 nuxt.config.ts 文件的目录。此文件用于配置 Nuxt 应用程序。

App 目录

app/ 目录是 Nuxt 应用程序的主目录。它包含以下子目录

  • assets/: 将由构建工具(Vite 或 webpack)处理的网站资源
  • components/: 应用程序的 Vue 组件
  • composables/: 添加您的 Vue composables
  • layouts/: 包装页面并避免页面之间重新渲染的 Vue 组件
  • middleware/: 在导航到特定路由之前运行代码
  • pages/: 基于文件的路由,用于在 Web 应用程序中创建路由
  • plugins/: 在创建 Nuxt 应用程序时使用 Vue 插件等
  • utils/: 在应用程序中添加可在组件、composables 和页面中使用的函数。

此目录还包含特定的文件

Public 目录

public/ 目录是包含 Nuxt 应用程序公共文件的目录。此目录中的文件在根目录下提供服务,并且不会被构建过程修改。

这适用于必须保留其名称(例如 robots.txt)*或*可能不会更改(例如 favicon.ico)的文件。

Server 目录

server/ 目录是包含 Nuxt 应用程序服务器端代码的目录。它包含以下子目录

  • api/: 包含应用程序的 API 路由。
  • routes/: 包含应用程序的服务器路由(例如动态 /sitemap.xml)。
  • middleware/: 在处理服务器路由之前运行代码
  • plugins/: 在创建 Nuxt 服务器时使用插件等
  • utils/: 在应用程序中添加可在服务器代码中使用的函数。

Shared 目录

shared/ 目录是包含 Nuxt 应用程序和 Nuxt 服务器共享代码的目录。此代码可在 Vue 应用和 Nitro 服务器中使用。

Content 目录

content/ 目录由Nuxt Content模块启用。它用于使用 Markdown 文件为您的应用程序创建基于文件的 CMS。

Modules 目录

modules/ 目录是包含 Nuxt 应用程序本地模块的目录。模块用于扩展 Nuxt 应用程序的功能。

Layers 目录

layers/ 目录允许您组织和共享可重用的代码、组件、composables 和配置。此目录中的层会自动在您的项目中注册。

Nuxt 文件

  • nuxt.config.ts 文件是 Nuxt 应用程序的主配置文件。
  • .nuxtrc 文件是配置 Nuxt 应用程序的另一种语法(对于全局配置很有用)。
  • .nuxtignore 文件用于在构建阶段忽略根目录中的文件。
这有帮助吗?