Vue 3中如何配置带样式与导航的全局默认布局？

1. 手动创建layouts文件夹 #

在项目根目录下直接新建layouts文件夹，Nuxt 3不会自动生成该目录，需手动创建。

2. 创建默认布局文件 #

在layouts文件夹内新建default.vue，这是全局默认布局文件，所有未指定布局的页面都会自动使用它。示例代码如下：

<template>
  <!-- 自定义头部导航 -->
  <header class="site-header">
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>

  <!-- 页面内容插槽 -->
  <main class="page-content">
    <slot /> <!-- 此处会渲染对应页面的内容 -->
  </main>

  <!-- 自定义页脚 -->
  <footer class="site-footer">
    <p>© 2024 自定义页脚</p>
  </footer>
</template>

<script setup>
// 可在此添加布局的逻辑代码
</script>

<style scoped>
/* 自定义布局样式 */
.site-header {
  background: #2c3e50;
  color: white;
  padding: 1rem;
}
.site-header nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}
.site-header a {
  color: white;
  text-decoration: none;
}
.page-content {
  padding: 2rem;
  min-height: calc(100vh - 120px);
}
.site-footer {
  background: #f8f9fa;
  padding: 1rem;
  text-align: center;
}
</style>

3. 布局生效与自定义指定 #

• Nuxt 3会自动识别layouts文件夹下的布局文件，无需额外配置。
• 若某页面需使用其他布局，可在页面组件中通过definePageMeta指定：

<script setup>
definePageMeta({
  layout: 'other' // 对应layouts/other.vue文件
})
</script>

4. 解决.nuxt/layouts被覆盖的问题 #

.nuxt是Nuxt自动生成的临时目录，每次启动开发服务都会重新生成，绝对不要直接修改该目录下的文件。所有自定义布局都需放在项目根目录的layouts文件夹中，Nuxt会在构建时自动将你的布局整合到.nuxt目录，不会被覆盖。

5. 全局CSS的处理 #

若需全局CSS，可在assets/css文件夹下创建全局样式文件（如global.css），然后在nuxt.config.ts中配置引入：

export default defineNuxtConfig({
  css: ['~/assets/css/global.css']
})

内容的提问来源于stack exchange，提问作者CodeBabyCode