Nuxt.js项目架构 #

my-nuxt-app/
├── .nuxt/                    # 自动生成的构建文件
├── .output/                  # 构建输出
├── app.vue                   # 应用入口
├── nuxt.config.ts            # Nuxt 配置
├── app.config.ts             # 应用配置
├── error.vue                 # 错误页面
│
├── assets/                   # 需要构建的资源
│   ├── css/
│   │   ├── main.css
│   │   └── variables.css
│   ├── images/
│   └── fonts/
│
├── components/               # 组件
│   ├── base/                 # 基础组件
│   │   ├── Button.vue
│   │   ├── Input.vue
│   │   └── Icon.vue
│   ├── common/               # 通用组件
│   │   ├── Header.vue
│   │   ├── Footer.vue
│   │   └── Sidebar.vue
│   ├── features/             # 功能组件
│   │   ├── SearchBar.vue
│   │   └── UserMenu.vue
│   └── ui/                   # UI 组件
│       ├── Modal.vue
│       ├── Toast.vue
│       └── Dropdown.vue
│
├── composables/              # 组合式函数
│   ├── useAuth.ts
│   ├── useCart.ts
│   ├── useTheme.ts
│   └── features/
│       ├── useSearch.ts
│       └── useFilter.ts
│
├── layouts/                  # 布局
│   ├── default.vue
│   ├── admin.vue
│   └── auth.vue
│
├── middleware/               # 路由中间件
│   ├── auth.ts
│   ├── admin.ts
│   └── guest.ts
│
├── modules/                  # 本地模块
│   └── my-module/
│       ├── index.ts
│       └── runtime/
│
├── pages/                    # 页面
│   ├── index.vue
│   ├── about.vue
│   ├── auth/
│   │   ├── login.vue
│   │   └── register.vue
│   ├── admin/
│   │   ├── index.vue
│   │   └── users.vue
│   └── blog/
│       ├── index.vue
│       └── [slug].vue
│
├── plugins/                  # 插件
│   ├── api.ts
│   ├── dayjs.ts
│   └── directives.ts
│
├── public/                   # 静态文件
│   ├── favicon.ico
│   ├── robots.txt
│   └── images/
│
├── server/                   # 服务端代码
│   ├── api/
│   │   ├── auth/
│   │   ├── users/
│   │   └── blog/
│   ├── middleware/
│   │   └── auth.ts
│   ├── routes/
│   │   └── sitemap.xml.ts
│   └── utils/
│       ├── db.ts
│       └── auth.ts
│
├── stores/                   # Pinia 状态
│   ├── auth.ts
│   ├── cart.ts
│   └── app.ts
│
├── types/                    # 类型定义
│   ├── index.d.ts
│   ├── api.d.ts
│   └── models.d.ts
│
├── utils/                    # 工具函数
│   ├── format.ts
│   ├── validate.ts
│   └── constants.ts
│
├── .env                      # 环境变量
├── .env.example              # 环境变量示例
├── .gitignore
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
└── tailwind.config.js

modules/
├── blog/
│   ├── components/
│   │   ├── BlogCard.vue
│   │   └── BlogList.vue
│   ├── composables/
│   │   └── useBlog.ts
│   ├── pages/
│   │   └── blog/
│   ├── server/
│   │   └── api/blog/
│   └── stores/
│       └── blog.ts
└── shop/
    ├── components/
    ├── composables/
    ├── pages/
    ├── server/
    └── stores/

components/
├── base/
│   ├── BaseButton.vue        → <BaseButton />
│   └── BaseInput.vue         → <BaseInput />
├── blog/
│   ├── BlogCard.vue          → <BlogCard />
│   └── BlogList.vue          → <BlogList />
└── user/
    ├── UserAvatar.vue        → <UserAvatar />
    └── UserMenu.vue          → <UserMenu />

export const useAuth = () => {}
export const useCart = () => {}
export const useTheme = () => {}
export const useSearch = () => {}

<template>
  <div class="component">
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string
  count?: number
}

interface Emits {
  (e: 'update', value: string): void
}

const props = withDefaults(defineProps<Props>(), {
  count: 0
})

const emit = defineEmits<Emits>()

const localState = ref('')

const computedValue = computed(() => props.count * 2)

const handleClick = () => {
  emit('update', localState.value)
}

onMounted(() => {
})
</script>

<style scoped>
.component {
}
</style>

interface UseFeatureOptions {
  immediate?: boolean
}

interface UseFeatureReturn {
  data: Ref<any>
  loading: Ref<boolean>
  error: Ref<Error | null>
  execute: () => Promise<void>
}

export const useFeature = (options: UseFeatureOptions = {}): UseFeatureReturn => {
  const { immediate = true } = options
  
  const data = ref(null)
  const loading = ref(false)
  const error = ref<Error | null>(null)
  
  const execute = async () => {
    loading.value = true
    error.value = null
    
    try {
      const result = await fetchData()
      data.value = result
    } catch (e) {
      error.value = e as Error
    } finally {
      loading.value = false
    }
  }
  
  if (immediate) {
    execute()
  }
  
  return {
    data,
    loading,
    error,
    execute
  }
}

import { z } from 'zod'

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email()
})

export default defineEventHandler(async (event) => {
  const method = getMethod(event)
  
  switch (method) {
    case 'GET':
      return await handleGet(event)
    case 'POST':
      return await handlePost(event)
    default:
      throw createError({
        statusCode: 405,
        message: 'Method Not Allowed'
      })
  }
})

async function handleGet(event: H3Event) {
  const query = getQuery(event)
  const data = await fetchData(query)
  return { data }
}

async function handlePost(event: H3Event) {
  const body = await readValidatedBody(event, schema.parse)
  const result = await createData(body)
  return { data: result }
}

interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'user'
  createdAt: string
}

interface Post {
  id: number
  title: string
  content: string
  author: User
  tags: string[]
  createdAt: string
}

interface ApiResponse<T> {
  data: T
  total?: number
  page?: number
  pageSize?: number
}

interface LoginRequest {
  email: string
  password: string
}

interface LoginResponse {
  user: User
  token: string
}

interface CreatePostRequest {
  title: string
  content: string
  tags?: string[]
}

interface UpdatePostRequest extends Partial<CreatePostRequest> {
  id: number
}

interface UserCardProps {
  user: User
  showActions?: boolean
  compact?: boolean
}

interface UserCardEmits {
  (e: 'edit', user: User): void
  (e: 'delete', id: number): void
}

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:error', (error) => {
    console.error('Global error:', error)
    
    const { $notify } = useNuxtApp()
    $notify?.error('An error occurred')
  })
  
  nuxtApp.hook('vue:error', (error, instance, info) => {
    console.error('Vue error:', error, info)
  })
})

export const useApi = () => {
  const { $notify } = useNuxtApp()
  
  const fetch = async <T>(url: string, options: any = {}): Promise<T> => {
    try {
      return await $fetch<T>(url, options)
    } catch (error: any) {
      if (error.response?.status === 401) {
        navigateTo('/login')
      } else {
        $notify?.error(error.message || 'Request failed')
      }
      throw error
    }
  }
  
  return { fetch }
}

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

<script setup lang="ts">
const props = defineProps<{
  error: {
    statusCode: number
    message: string
  }
}>()

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