项目基础布局实现|Nuxt3专题 | 前端进阶之旅

本节我们实现项目基础布局，前面大家也看到了，我们的网站包括两个布局：

基础布局：用于网站内容部分；
登录布局：用于登录、注册部分。

# 基础布局

基础布局为上中下结构，包括：

MyHeader
Content
MyFooter

# 创建基础布局

下面我们创建基础布局，layouts/default.vue

xml
复制代码<template>
  <div class="min-w-[1024px] bg-gray-100 flex flex-col min-h-screen">
    <MyHeader />
    <main class="container m-auto mt-20">
      <slot />
    </main>
    <MyFooter />
  </div>
</template>

@前端进阶之旅: 代码已经复制到剪贴板

# MyHeader 组件

这里我们需要创建 components/MyHeader.vue 和 components/MyFooter.vue。

MyHeader 组件：包含 logo、导航栏、登录按钮或用户信息。

ini
复制代码<script setup>
const route = useRoute()
const menus = ref([
  { path: '/', label: '首页' },
  { path: '/column', label: '专栏' },
  { path: '/course', label: '课程' },
])
</script>

<template>
  <div class="bg-white fixed top-0 left-0 right-0 shadow-sm z-1000">
    <div class="container m-auto flex items-center h-[60px] px-4">
      <NButton text strong class="text-xl" @click="navigateTo('/')">
        羊村学堂
      </NButton>

      <div class="flex-1 flex items-center px-4">
        <Menu
          v-for="menu in menus"
          :key="menu.path"
          :active="route.path === menu.path"
          @click="navigateTo(menu.path)"
        >
          {{ menu.label }}
        </Menu>
      </div>

      <NuxtLink to="/login">
        <NButton secondary strong>
          登录
        </NButton>
      </NuxtLink>
    </div>
  </div>
</template>

@前端进阶之旅: 代码已经复制到剪贴板

Menu.vue 组件：