logo
1
0
Login

Nuxt 4 项目目录结构说明

目录结构概览

.output/ .nuxt/ app/ assets/ components/ composables/ layouts/ middleware/ pages/ plugins/ utils/ app.config.ts app.vue router.options.ts content/ layers/ modules/ node_modules/ public/ shared/ server/ api/ middleware/ plugins/ routes/ utils/ nux.config.ts

各目录功能说明

.nuxt/

  • Nuxt 的构建输出目录,包含编译后的文件
  • 通常需要添加到 .gitignore

app/

项目的主要源代码目录,包含:

  • assets/ - 静态资源文件,如样式、图片等
  • components/ - Vue 组件,会自动导入
  • composables/ - Vue 组合式 API 函数
  • layouts/ - 页面布局组件
  • middleware/ - 路由中间件
  • pages/ - 页面组件,用于自动生成路由
  • plugins/ - Nuxt 插件
  • utils/ - 工具函数
  • app.config.ts - 应用配置文件
  • app.vue - 应用根组件
  • router.options.ts - 路由配置选项

content/

  • 用于存储内容文件,通常与 Nuxt Content 模块一起使用

public/

  • 静态资源目录,存放不需要构建处理的文件
  • 文件会直接复制到构建输出目录的根部

server/

  • 服务端代码目录,包含:
    • api/ - API 路由
    • middleware/ - 服务端中间件
    • plugins/ - 服务端插件
    • routes/ - 自定义路由
    • utils/ - 服务端工具函数

其他文件/目录

  • nuxt.config.ts - Nuxt 项目的主配置文件
  • package.json - 项目依赖和脚本配置
  • node_modules/ - 项目依赖包
  • layers/ - Nuxt 层(Layers)配置
  • modules/ - 本地 Nuxt 模块
  • shared/ - 客户端和服务端共享的代码

About

Nuxt4开发的AI根据下拉词生成的单页面工具。

Language
TypeScript59.2%
Shell24.6%
Vue16.1%
Others0.1%