在nuxt3中，如何使用约定？

在 Nuxt 3 中，约定（Convention）是一种核心理念，它简化了开发流程，通过遵循特定的目录结构和命名规则，自动配置路由、组件、布局等。以下是 Nuxt 3 中主要的约定使用方式：

‌1、约定路由（Routing）‌：

Nuxt 3 使用约定式路由（File-based Routing），无需手动配置路由。

在项目根目录下的 pages 文件夹中创建 .vue 文件，文件名和文件夹结构会自动映射为路由。

   例如：pages/index.vue 对应 / 路径。

   例如：pages/about.vue 对应 /about 路径。

   例如：pages/user/[id].vue 对应 /user/123 这样的动态路由，可以通过 $route.params.id 访问参数。

   例如：pages/parent/child.vue 对应 /parent/child 路径，实现嵌套路由。

特殊文件名如 index.vue 代表默认页面，[param].vue 代表动态参数路由。

2、‌约定组件（Components）‌：

在 components 文件夹中创建 Vue 组件文件，Nuxt 会自动加载并注册这些组件，无需手动导入。

例如：components/Alert.vue 可以直接在模板中使用 <Alert /> 标签。

例如：components/Profile/Alert.vue 会自动转换为 <ProfileAlert /> 标签。

‌

3、约定布局（Layouts）‌：

在 layouts 文件夹中创建 .vue 文件作为布局组件。

默认布局是 layouts/default.vue，如果页面没有指定布局，则会自动使用。

自定义布局如 layouts/custom.vue 需要在页面中通过 definePageMeta 指定使用。例如：

<script setup>

definePageMeta({layout: "custom" })

</script>

布局文件中使用 <slot /> 或具名插槽来插入页面内容。

‌

4、约定资源（Assets & Public）‌：

将图片、字体、样式等资源文件放入 assets 或 public 文件夹。

assets 中的资源通常用于构建时处理，如 CSS 和图片。

public 中的资源会被直接复制到构建输出目录，可直接通过 URL 访问。

通过遵循这些约定，开发者可以快速搭建项目结构，减少配置工作，提高开发效率。