4.4-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》页面布局（layouts）

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

本教程配套示例在线预览网址：https://www.dvtop.cn

Nuxt3提供可定制的布局框架，可以在整个应用程序中使用，非常适合将通用UI或代码模式提取到可重用的布局组件中。

页面布局Vue文件必须放在项目根目录的layouts目录下，使用时自动异步导入加载。

4.4.1 默认全局布局

默认布局文件必须为~/layouts/default.vue，通过在~/app.vue中增加<NuxtLayout>组件包含到NuxtPage配置，将整个项目页面使用默认布局。

~/layouts/default.vue

<template>   <div class="app-box">     <div>此区域使用默认布局。</div>     <slot />   </div> </template>

增加<NuxtLayout>标签对