布局就是包住页面的外层舞美系统。
官方文档明确要求：
app/layouts/default.vue是默认布局- 布局组件必须有单根节点
- 不能让根节点直接就是
<slot />
默认布局：
<!-- app/layouts/default.vue -->
<template>
<div class="shell">
<header>全台头部</header>
<main>
<slot />
</main>
<footer>全台底部</footer>
</div>
</template>页面切换指定布局：
<!-- app/pages/studio.vue -->
<script setup lang="ts">
definePageMeta({
layout: 'studio'
})
</script>
<template>
<section>演播厅页面</section>
</template>自定义布局文件：
<!-- app/layouts/studio.vue -->
<template>
<div class="studio-layout">
<aside>导演台</aside>
<div class="stage">
<slot />
</div>
</div>
</template>核心心智：
app.vue = 全站总壳
layout = 一类页面共用的外层包装
page = 具体某一页的内容很多人会混：
- 只有一个统一壳子时，
app.vue往往够用 - 需要多套外壳时，再引入
layouts/
不要为了“显得专业”而先堆一堆布局。