功能4：首页使用Layout布局
功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目
前言
Layout布局的效果。在侧边栏点击不同菜单，只有红框里的内容会对应改变。
整个页面是父路由的component渲染，红框是子路由的component渲染。
一.操作步骤
1.使用AI生成Layout页面
2.新建文件
src/
├─ layout/
│ ├─ components/
│ │ ├─ Navbar.vue
│ │ ├─ Sidebar.vue
│ │ └─ AppMain.vue
│ ├─ index.vue
为了保持跟若依基本一致的文件目录。按照上面的路径新建文件，然后将AI生成的内容复制到对应的文件里。
1.Sidebar组件 (Sidebar.vue)
<script setup>
import { RouterLink } from 'vue-router'
import {
ElMenu,
ElMenuItem,
ElSubMenu,
ElIcon
} from 'element-plus'
import { Document, Setting } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
const route = useRoute()
</script>
<template>
<el-menu
:default-active="route.path"
class="h-full"
router
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
>
<el-menu-item index="/">
<el-icon><Document /></el-icon>
<span>首页</span>
</el-menu-item>
<el-sub-menu index="/about">
<template #title>
<el-icon><Setting /></el-icon>
<span>关于</span>
</template>
<el-menu-item index="/about">关于我们</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
<style scoped>
.el-menu {
border-right: none;
}
</style>
2.Navbar组件 (Navbar.vue)
<script setup>
import { ElHeader, ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
const breadcrumbItems = [
{ title: '首页', path: '/' },
{ title: '关于', path: '/about' }
]
</script>
<template>
<el-header class="bg-white border-b flex items-center">
<el-breadcrumb separator="/">
<el-breadcrumb-item
v-for="item in breadcrumbItems"
:key="item.path"
:to="item.path"
>
{{ item.title }}
</el-breadcrumb-item>
</el-breadcrumb>
</el-header>
</template>
3.AppMain组件 (AppMain.vue)
<script setup>
import { ElMain } from 'element-plus'
</script>
<template>
<el-main>
<router-view v-slot="{ Component }">
<transition name="fade-transform" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</el-main>
</template>
<style scoped>
.el-main {
padding: 20px;
background-color: #f0f2f5;
}
</style>
4.布局组件 (layout/index.vue)
AI生成的代码，文件目录结构有可能跟我们的不一样，要注意修改下面的import组件的位置。
<script setup>
import { ElContainer, ElAside } from 'element-plus'
import Sidebar from './components/Sidebar.vue'
import Navbar from './components/Navbar.vue'
import AppMain from './components/AppMain.vue'
</script>
<template>
<el-container class="h-screen">
<el-aside width="200px">
<Sidebar />
</el-aside>
<el-container>
<el-header height="48px">
<Navbar />
</el-header>
<AppMain />
</el-container>
</el-container>
</template>
<style>
.el-header {
--el-header-padding: 0;
height: auto;
}
</style>
3.修改路由配置（src/router/index.js）
将路由记录修改为嵌套路由，layout页面为父级布局组件，子路由的组件就是具体的页面。
import Layout from '@/layout/index.vue'
{
path: '/',
component: Layout,
redirect: '/index',
children: [
{
path: 'index',
component: () => import('@/views/index.vue'),
}
]
}
二.功能验证
启动项目，浏览器输入http://localhost:5173
基本结构是有了，就是页面看起来很丑。
项目一开始，最重要的一定是先有功能
然后才有性能，优化，美化…(99+)
三.知识点拓展
1. 嵌套路由实现
// 路由配置核心代码
{
path: '/',
component: Layout, // 父级布局组件
children: [ // 嵌套子路由
{
path: 'index', // 实际路径 /index
component: Home // 子页面组件
}
]
}
• 父子路由关系：父路由负责整体布局，子路由在指定区域渲染
• 路径继承：子路由路径会自动继承父级路径，形成完整路径
2. 动态路由匹配
<!-- Sidebar中的路由匹配 -->
<el-menu-item index="/about">
// 通过useRoute获取当前路径
const route = useRoute()
• 路由激活状态：通过对比当前路径实现菜单高亮
• 响应式更新：当路由变化时，相关组件自动更新
3. 命名视图
// 多视图布局配置
{
path: '/',
components: {
default: Layout,
sidebar: CustomSidebar
}
}
• 允许在同一个页面中定义多个路由出口
• 通过<router-view name="sidebar">指定渲染位置
4. 过渡动画
<!-- AppMain中的过渡效果 -->
<transition name="fade-transform" mode="out-in">
<component :is="Component" />
</transition>
• 动画类型：
• fade-transform：淡入淡出结合位移效果
• mode=“out-in”：保证旧组件先退出，新组件再进入
• 组件复用：通过<component>实现动态组件渲染
5. 响应式布局技巧
/* 全屏布局实现 */
.h-screen {
height: 100vh;
}
.flex {
display: flex;
}
• 视窗单位：vh/vw实现自适应布局
• Flex布局：实现灵活的内容排列
• 层叠上下文：z-index管理侧边栏与内容层级
四.思考
1.一点不会前端，也能依靠AI完成整个项目吗？
AI可以帮我们写出了90%的代码，剩下10%，还需要程序员根据实际的功能需求，参考ElementPlus官网，vue官网，配合浏览器的开发者工具等。在遇到问题时，解决问题。