nuxt3实战之alone-blog（三）：项目基本布局搭建、顺带学习组件和布局

K先生 2022-11-18 爱技术1266

因为之前并没有用nuxt做过实战项目，所以这次的alone-blog项目也算是要在学习中完成了。像企业官网、个人博客这些的开发还是比较注重SEO的，所以alone-blog也会把SEO放在首位。

一、先了解一下nuxt3中的组件

首先创建components/MyHeader.vue文件，然后随便在里面写点什么。然后就可以去使用了，然后直接在app.vue文件中<MyHeader />就可以了，nuxt3会自动注册，所以我们使用很方便。

这里为了后续方便管理组件，这里在创建alone文件夹，以后alone-blog通用组件都放到这里。

创建alone/Footer.vue文件，然后这样使用：<AloneFooter />

二、再了解一下nuxt3中的布局

如果网站只需要一种布局的话，那么可以直接在app.vue中这样写：

<template>
  <div>
    <MyHeader />
    <NuxtPage />
    <p class="text-3xl text-green-500 m-20">这是nuxt3+tailwindcss3新项目</p>
    <AloneFooter />
  </div>
</template>

当然alone-blog以后肯定不会仅仅只支持一种布局，所以，这里我们这样整：首先创建layouts/default.vue文件，这个就作为默认的布局文件，再创建一个layouts/test.vue文件，暂时测试学习用。

现在app.vue就变成了这样：

<template>
  <div>
    <NuxtLayout>
    <NuxtPage />
    <p class="text-3xl text-green-500 m-20">这是nuxt3+tailwindcss3新项目</p>
    </NuxtLayout>
  </div>
</template>

这其实就多了一个<NuxtLayout></NuxtLayout>标签，它会自动调用layouts目录下的default.vue文件，这时候的default.vue文件是这样的：

<template>
    <div>
        <MyHeader />
        <slot />
        <AloneFooter />
    </div>
</template>

多了一个<slot />标签，这其实就代表你的页面部分。那如果想要换成test.vue中的布局呢？把app.vue文件改成这样：

<template>
  <div>
    <NuxtLayout :name="layout">
    <NuxtPage />
    <p class="text-3xl text-green-500 m-20">这是nuxt3+tailwindcss3新项目</p>
    </NuxtLayout>
  </div>
</template>
<script setup>
    const layout = 'test';
</script>

nuxt3的components组件和layouts布局了解那么多，暂时应该够alone-blog使用了。

三、alone-blog的基本布局

alone-blog的基本布局暂时也按三段式走，上面header，下面footer，中间内容主体。像<MyHeader />组件和<AloneFooter />组件中样式什么的这就不浪费时间多BB了，不过有一点要注意，既然说要注重SEO优化那么在开发过程中尽量使用html语义化标签，比如头部导航栏用header标签，底部信息栏用footer标签，还有nav标签、article标签都要合理用起来。

马上进入下一节。

作者：K先生本文地址：http://www.gold404.cn/info/150

上一篇： nuxt3实战之alone-blog（二）：先了解一下nuxt3的路由吧

下一篇： nuxt3实战之alone-blog（四）：引入sass并了解下nuxt3的SEO

nuxt3实战之alone-blog（三）：项目基本布局搭建、顺带学习组件和布局

一、先了解一下nuxt3中的组件

二、再了解一下nuxt3中的布局

三、alone-blog的基本布局

文章评论

欢迎您，K先生

评论列表