Nuxt3项目实战篇5——组件的使用与布局模板

本想直接写数据强求篇，但是考虑到页面都没有写完，我们还是先写布局吧

一. 组件

自动导入

首先nuxt3中的组件，只要在components目录下的组件，都是自动导入的，举个栗子：

| components/
--| TheHeader.vue
--| TheFooter.vue

在layouts的default.vue中使用

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

组件名称: 组件的名称是基础路径和文件名，并删除重复的段。

| components/
--| base/
----| foo/
------| Button.vue

//使用方式 <BaseFooButton />. 

动态导入组件

要动态导入组件（也称为延迟加载组件），您只需Lazy在组件名称中添加前缀即可。如果不总是需要该组件，lazy的动态组件将特别有用。通过使用Lazy前缀，您可以延迟加载组件代码，直到合适的时间，这有助于优化 JavaScript 包大小。

template>
  <div>
    <h1>Mountains</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">Show List</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

我们也可以直接导入组件

<template>
  <div>
    <h1>Mountains</h1>
    <LazyMountainsList v-if="show" />
    <button v-if="!show" @click="show = true">Show List</button>
    <NuxtLink to="/">Home</NuxtLink>
  </div>
</template>

<script setup>
  import { NuxtLink, LazyMountainsList } from '#components'
  const show = ref(false)
</script>

二、 布局 NuxtLayout

默认布局，

添加一个~/layouts/default.vue：

<template>
  <div class="page-container">
    <TheHeader />
    //布局的内容将被加载到 中<slot />，而不需要使用特殊的组件。
    <slot />
    <TheFooter />
  </div>
</template>

然后我们在pages/index.vue中使用
<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>

首先在layouts文件夹下的default.vue是默认布局，在NuxtLayout上没有名字的时候，就会默认使用的是defualt通用布局。 默认布局可以和其他布局一起使用。

<template>
  <!-- <NuxtLayout name="default"> some content... </NuxtLayout> -->
  <NuxtLayout @scrollTo="scrollTo">
    <div class="crimoons-info">
      <NuxtChild /> //有参数的子路由
    </div>
  </NuxtLayout>
</template>

<script setup>
definePageMeta({
  layout: false, // 手动关闭 default 布局
})
<script>

使用了NuxtLayout查看网页源码， 发现SSR渲染， 不要惊慌，程序没有问题，如果你发现你没有进行ssr渲染，答案只有一个： 你的代码有问题。这个坑我已经踩过了，开始我以为是程序问题，还在担心， 经过仔细排查，发现是我代码问题。 多点耐心，仔细排查吧。

自定义布局:

-| layouts/
---| default.vue
---| custom.vue

覆盖默认布局的两种方式

//方式1：添加name属性覆盖
<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>
<script setup>
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>

//方式2： 直接使用definePageMeta的layout属性
<script>
// This will also work in `<script setup>`
definePageMeta({
  layout: "custom",
});
</script>

动态改变布局， 个人认为这个做换肤功能很便利

<template>
  <div>
    <button @click="enableCustomLayout">Update layout</button>
  </div>
</template>

<script setup>
const route = useRoute()
function enableCustomLayout () {
  route.meta.layout = "custom"
}
definePageMeta({
  layout: false,
});
</script>

总结一下，使用其他布局，有三种方式

//方式1： 直接在NuxtLayout上添加name属性；
<NuxtLayout name="custom"></NuxtLayout>

//方式2： 直接使用设置layout名字
<script setup>
definePageMeta({
  layout: 'custom',
})
</script>

//方式3： 设置不使用default布局
<script setup>
definePageMeta({
  layout: false,
})
</script>

注意点：

• 在Layouts中创建的default.vue会作为一个全局默认的布局模板
• 当程序只有一种布局时，甚至可以直接在app.vue中创建布局
• NuxtLayout与嵌套路由一起使用的时候，显示顺序有问题。

Nuxt3踩坑记录

1. 虽然vue3已经支持template下面多节点，但是nuxt3并不支持，在template下直接写多节点导致的后果就是路由的时候出现空白页。
2. 做开发过程中，经常出现空白页或者数据不请求，都是因为template下多节点导致。
3. Nuxt 3的composables/目录下的文件会自动导入到您的应用程序中,无需额外导入

开发的过程中，我有疑问：nuxtlayout中的事件怎么向外传递？我暂时还没有找到答案。

如果你觉得我的文章写得不错，记得添加关注与点赞哦。

源码地址：https://gitee.com/running-team/nuxt3-chapter5.git