Nuxt3初探(四)——layouts的使用

·  阅读 479
Nuxt3初探(四)——layouts的使用

最近跟着杨村长B站的视频教程及其发起的对赌学习计划(尤其感谢赌学习计划光速完成了Nuxt3中文文档翻译),跟着文档示例敲一遍很快就能掌握layouts的基本用法。这次记录一下掌握Nuxt3的对layouts约定的基本用法和使用layouts实现一个类似vitepress的布局。

  • 基本概念

  1. layouts是Nuxt3提供的一种方便开发者快速实现自定义布局的约定
  2. 使用该约定需要在根目录下创建layouts文件夹,并在里面创建.vue文件用来作为布局模板。如果需要创建多个模板,在layouts中创建多个.vue文件即可
  3. 在layouts中创建的.vue文件可以看做是一个容器,我们需要使用<slot name="header-box"/>插槽来存放页面相应位置的填充内容
  4. <NuxtLayout/>标签是可以个通用的布局标签,可以看做我们创建的布局容器,可以<NuxtLayout name="xxx"/>通过指定name属性布局模板文件名的方式指定布局模板
  5. <NuxtLayout/>标签中使用<template #header-box>来为当前内容指定放置的布局位置。
  • 实践练习

  1. 目标:实现一个类似vitepress文档页面的两栏布局
  2. 目录结构

image.png

  1. custom.vue:
    <template>
      <div class="page-box">
        <div class="header-box">
          <slot name="header-box"/>
        </div>
        <div class="body-box">
          <div class="left-sider">
            <slot name="left-sider"/>
          </div>
          <div class="body-content">
            <slot name="body-content"/>
          </div>
        </div>
      </div>
    </template>

    <style>
        .page-box {
          display: flex;
          flex-direction: column;
        }
        .header-box {
          width: 100%;
          height: 100px;
          display: flex;
          background-color: red;
        }
        .body-box {
          width: 100%;
          display: flex;
          flex-flow: row;
        }
        .left-sider {
          width: 400px;
          height: calc(100vh - 100px);
          background: yellow;
          overflow: auto;
        }
        .body-content {
          flex: 1;
          height: calc(100vh - 100px);
          background-color: blue;
          overflow: auto;
        }
        .sider-content {
          height: 1300px;
          width: 200px;
          background-color: black;
        }
    </style>
复制代码
  1. layout-test/index.vue:
    <template>
      <NuxtLayout name='custom'>
        <template #header-box>
          <div>首页</div>
          <div>关于</div>
        </template>
        <template #left-sider>
          <div>快速入门</div>
          <div>使用</div>
          <div>目录结构</div>
        </template>
        <template #body-content>
          <div>我应该显示一点内容</div>
        </template>
      </NuxtLayout>
    </template>

    <script>
    export default {
      layout: false
    }
    </script>
复制代码
  1. pages/index.vue中有一个跳转至layout-test/index.vue<NuxtLink/>
  • Point

  1. 在Layouts中创建的default.vue会作为一个全局默认的布局模板
  2. 使用<NuxtLayout>标签时需要将当前页面的layout设置为false,使用这种方式同时需要使用setup时则需要额外创建一个<script setup>
  3. 当程序只有一种布局时,甚至可以直接在app.vue中创建布局
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改