nuxt3 项目大体结构和功能介绍

在 Nuxt 3 中，项目结构和功能是根据 Vue 3 和 Nuxt 框架的最新最佳实践进行组织的。Nuxt 3 使得开发现代化的 Vue 应用变得更加高效、灵活且易于扩展。以下是 Nuxt 3 项目的结构介绍和各个目录、功能的详细说明：

Nuxt 3 项目结构

在 Nuxt 3 中，项目的基本目录结构如下：

my-nuxt3-project/
│
├── assets/              # 存放未编译的静态资源（例如：图片、样式文件、字体等）
├── components/          # 存放 Vue 组件
├── composables/         # 存放 Vue 3 的组合式 API 函数
├── content/             # 用于 Nuxt Content 模块存储内容（如果启用）
├── layouts/             # 存放页面布局组件（如默认布局、用户登录布局等）
├── middleware/          # 存放中间件，用于控制路由访问权限等
├── pages/               # 存放 Vue 页面组件，对应不同的路由
├── plugins/             # 存放插件，用于扩展功能
├── public/              # 存放静态文件，直接暴露在服务器上
├── server/              # 存放服务器端代码，如 API、服务端渲染等
├── store/               # 存放 Pinia 或 Vuex store（用于状态管理）
├── nuxt.config.ts       # Nuxt 配置文件，定义项目配置
├── package.json         # 项目依赖和脚本
├── tsconfig.json        # TypeScript 配置（如果启用了 TypeScript）
└── .gitignore           # Git 忽略文件配置

项目目录功能介绍

1. assets/

存放未经过编译的静态资源，例如：

• 图片（.jpg, .png 等）
• 字体（.woff, .ttf 等）
• 样式文件（如 scss, sass 文件）

这些文件可以通过路径引用或在 vue 文件中直接引用。

2. components/

Vue 组件存放位置。这个目录通常用于存放项目中复用的组件。

例如：

<!-- components/Button.vue -->
<template>
  <button>{{ label }}</button>
</template>

<script setup>
defineProps({
  label: String
})
</script>

在页面中可以直接使用：

<template>
  <Button label="Click me" />
</template>

3. composables/

存放 Vue 3 的组合式 API 函数。Composable 是封装业务逻辑并在多个组件之间共享的一种模式。

例如：

// composables/useCounter.js
import { ref } from 'vue'

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

在组件中使用：

<script setup>
import { useCounter } from '@/composables/useCounter'

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

<template>
  <p>{{ count }}</p>
  <button @click="increment">Increment</button>
</template>

4. content/

用于存储与 Nuxt Content 模块相关的内容。Nuxt Content 是 Nuxt 3 提供的一个模块，用于生成静态内容网站，尤其适用于 Markdown 文件或 API 数据的展示。

5. layouts/

布局组件，用于定义页面的布局。你可以为不同的页面指定不同的布局。

例如：

<!-- layouts/default.vue -->
<template>
  <div>
    <header>Header</header>
    <main><slot /></main>
    <footer>Footer</footer>
  </div>
</template>

然后，在页面中指定布局：

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

6. middleware/

用于处理路由守卫的中间件，可以在页面渲染前或路由跳转前进行拦截，适用于权限验证、重定向等操作。

例如：

// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useState('user')
  if (!user.value) {
    return navigateTo('/login')
  }
})

7. pages/

这是 Nuxt 3 最重要的目录之一。它自动根据文件夹和文件名生成路由，无需手动配置路由。每个 .vue 文件对应一个页面，Nuxt 3 会自动为每个页面生成路由。

例如：

<!-- pages/index.vue -->
<template>
  <h1>Welcome to Nuxt 3!</h1>
</template>

Nuxt 3 会自动将该页面暴露为 / 路由。

动态路由也很简单，通过在文件名中使用下划线 _ 来实现。例如：

pages/
├── user/
│   └── _id.vue   # 动态路由：/user/:id

8. plugins/

插件目录，用于初始化第三方库、配置全局功能、提供共享功能等。

例如，创建一个插件来注册全局组件：

// plugins/globalComponents.js
import { defineNuxtPlugin } from '#app'
import MyComponent from '@/components/MyComponent.vue'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('MyComponent', MyComponent)
})

9. server/

如果你需要自定义服务器端代码（例如创建 API 路由，或者处理请求），可以在 server 目录下创建对应的文件。这个目录可以处理 Server-Side Rendering (SSR) 请求。

例如：

// server/api/posts.js
export default defineEventHandler(() => {
  return [
    { id: 1, title: 'Post 1' },
    { id: 2, title: 'Post 2' }
  ]
})

10. store/

存放 Pinia 或 Vuex 状态管理文件。Pinia 是 Vue 推荐的状态管理库，是 Vuex 的替代品，适用于 Nuxt 3。

例如：

// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe'
  }),
  actions: {
    setName(newName) {
      this.name = newName
    }
  }
})

11. nuxt.config.ts

Nuxt 项目的配置文件。在这里你可以配置很多 Nuxt 特性和模块，例如路由、插件、服务器设置等。

// nuxt.config.ts
export default defineNuxtConfig({
  buildModules: ['@nuxtjs/tailwindcss'],
  css: ['@/assets/styles/main.css']
})

12. package.json

包含项目的依赖、脚本命令等元数据。在这个文件里，你可以定义项目的依赖（如 vue, nuxt 等），以及构建、开发时使用的脚本。

13. tsconfig.json

如果你使用了 TypeScript，它会存放 TypeScript 配置文件。

Nuxt 3 的核心功能

1. 文件系统路由：通过 pages 目录自动生成路由，无需手动配置。
2. 自动化配置：许多 Nuxt 3 特性如路由、布局、静态生成等都是自动配置的，极大提高开发效率。
3. 服务器端渲染 (SSR)：默认启用 SSR，支持动态渲染内容并提高 SEO 性能。
4. 静态站点生成：通过 nuxt generate 构建完全静态的站点，适用于博客或文档网站等。
5. 模块化系统：支持 Nuxt 模块，可以轻松集成第三方库和功能（如认证、分析等）。
6. 支持 TypeScript：原生支持 TypeScript，无需额外配置。
7. Pinia 状态管理：推荐使用 Pinia 管理应用状态。

总结

Nuxt 3 提供了一种非常清晰和高效的项目结构，能够帮助开发者快速构建现代化的 Web 应用。它的文件系统路由、自动化配置、SSR 支持等特性，让开发变得简单而灵活。同时，支持组件化开发、插件扩展和状态管理，适应各种开发需求。