Nuxt.js项目结构 #

my-nuxt-app/
├── .nuxt/              # 自动生成的构建文件
├── .output/            # 构建输出目录
├── app.vue             # 应用入口组件
├── nuxt.config.ts      # Nuxt 配置文件
├── app.config.ts       # 应用配置文件
├── error.vue           # 错误页面
├── pages/              # 页面路由
├── components/         # 组件目录
├── layouts/            # 布局组件
├── composables/        # 组合式函数
├── plugins/            # 插件目录
├── modules/            # 模块目录
├── middleware/         # 路由中间件
├── server/             # 服务端代码
├── assets/             # 需要构建的静态资源
├── public/             # 静态文件目录
├── utils/              # 工具函数
└── types/              # TypeScript 类型定义

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  app: {
    head: {
      title: 'My App',
      meta: [
        { name: 'description', content: 'My amazing Nuxt application' }
      ]
    }
  },
  runtimeConfig: {
    public: {
      apiBase: '/api'
    }
  }
})

export default defineAppConfig({
  title: 'My App',
  theme: {
    primaryColor: 'blue'
  }
})

<script setup>
const appConfig = useAppConfig()
console.log(appConfig.title)
</script>

<template>
  <div class="error-page">
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="handleError">返回首页</button>
  </div>
</template>

<script setup>
const props = defineProps({
  error: Object
})

const handleError = () => clearError({ redirect: '/' })
</script>

pages/
├── index.vue           → /
├── about.vue           → /about
├── blog/
│   ├── index.vue       → /blog
│   ├── [id].vue        → /blog/:id
│   └── category/
│       └── [slug].vue  → /blog/category/:slug
└── user/
    └── [id]/
        └── profile.vue → /user/:id/profile

<template>
  <div>
    <h1>文章 ID: {{ route.params.id }}</h1>
  </div>
</template>

<script setup>
const route = useRoute()
</script>

pages/
├── (marketing)/
│   ├── about.vue       → /about
│   └── contact.vue     → /contact
└── (shop)/
    ├── products.vue    → /products
    └── cart.vue        → /cart

<template>
  <div class="layout">
    <header>
      <nav>...</nav>
    </header>
    <main>
      <slot />
    </main>
    <footer>...</footer>
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'custom'
})
</script>

export default defineNuxtRouteMiddleware((to, from) => {
  const isAuthenticated = useState('authenticated')
  
  if (!isAuthenticated.value) {
    return navigateTo('/login')
  }
})

<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

components/
├── AppHeader.vue       → <AppHeader />
├── AppFooter.vue       → <AppFooter />
├── blog/
│   ├── Card.vue        → <BlogCard />
│   └── List.vue        → <BlogList />
└── ui/
    ├── Button.vue      → <UiButton />
    └── Input.vue       → <UiInput />

export const useCounter = () => {
  const count = ref(0)
  const increment = () => count.value++
  const decrement = () => count.value--
  
  return {
    count,
    increment,
    decrement
  }
}

<script setup>
const { count, increment, decrement } = useCounter()
</script>

export const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString('zh-CN')
}

export const slugify = (text: string) => {
  return text.toLowerCase().replace(/\s+/g, '-')
}

server/
├── api/
│   ├── users.ts        → /api/users
│   └── blog/
│       ├── index.ts    → /api/blog
│       └── [id].ts     → /api/blog/:id
├── routes/
│   └── sitemap.ts      → /sitemap.xml
├── middleware/
│   └── auth.ts         # 服务端中间件
└── plugins/
    └── db.ts           # 服务端插件

export default defineEventHandler((event) => {
  return {
    message: 'Hello API'
  }
})

export default defineEventHandler((event) => {
  const token = getHeader(event, 'authorization')
  
  if (!token) {
    throw createError({
      statusCode: 401,
      message: 'Unauthorized'
    })
  }
})

assets/
├── css/
│   └── main.css
├── images/
│   └── logo.png
└── fonts/
    └── custom.woff2

<template>
  <img src="~/assets/images/logo.png" />
</template>

<style>
@import '~/assets/css/main.css';
</style>

public/
├── favicon.ico
├── robots.txt
└── images/
    └── og-image.png

export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      formatPrice: (price: number) => `¥${price.toFixed(2)}`
    }
  }
})

<script setup>
const { $formatPrice } = useNuxtApp()
</script>

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  setup(options, nuxt) {
    // 模块逻辑
  }
})

declare module 'nuxt/schema' {
  interface NuxtConfig {
    myModule?: MyModuleOptions
  }
}

export interface MyModuleOptions {
  enabled: boolean
}

src/
├── pages/          # 按功能模块组织
│   ├── (auth)/
│   │   ├── login.vue
│   │   └── register.vue
│   └── (dashboard)/
│       ├── index.vue
│       └── settings.vue
├── components/     # 按功能分类
│   ├── common/     # 通用组件
│   ├── layout/     # 布局组件
│   └── features/   # 功能组件
├── composables/    # 按功能分类
│   ├── useAuth.ts
│   └── useCart.ts
└── server/
    └── api/        # 按模块分类
        ├── auth/
        └── products/