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

2022-07-20 10:40:15

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

一. 组件

自动导入

首先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

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2022 zhmzjl.com | by: KAPO