本节我们实现项目基础布局,前面大家也看到了,我们的网站包括两个布局:
- 基础布局:用于网站内容部分;
- 登录布局:用于登录、注册部分。
# 基础布局
基础布局为上中下结构,包括:
- 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 组件:
