布局

nuxt中布局文件是放在layouts目录下的，名为default.vue为默认布局

通过关键标签NuxtLayout实现使用布局

创建layouts文件夹----》创建default.vue---》创建mypage.vue

以下代码加入slot是为了方便使用时可自定义放入代码块

default.vue

<template>
    <div>
        <h1>默认布局default</h1>
        <slot />
    </div>
</template>

mypage.vue

<template>
    <!-- 自定义布局页 -->
    <div>
        <h2>自定义布局!!!!</h2>
        <slot />
    </div>
</template>

这样就注册好了两个布局页

顺便在一个页面中去使用

name对应文件名即可

<NuxtLayout name="mypage">测试自定义...</NuxtLayout>
    <NuxtLayout name="default">测试默认布局...</NuxtLayout>

这样就能使用了

组件

用vue时都需要手动导入组件，现在用nuxt当然不用做这些繁琐的事情

nuxt的组件都是放在components文件夹下

根目录下创建components文件夹---》创建组件1文件

这里创建了个pengke-header组件

<template>
    <div>
        <h1>碰磕Header组件</h1>
    </div>
</template>

使用时直接使用文件名标签即可

 <pengke-header></pengke-header>

这样就成了，nuxt将components下的组件自动全局引入了

Tip:这里提一点就是如果没有嵌套的组件就是以文件名为组件名，如果多个文件夹嵌套那组件名为多个文件名名称与文件名拼接即组件名!

组件懒加载

只需要在组件名前加上Lazy前缀即可....（创建组件文件时也以Lazy开头即可）这里就不示例了...

完结~（工作之余更新😥）