使用AI一步一步实现若依前端(4)

功能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"routerbackground-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-itemv-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',        // 实际路径 /indexcomponent: 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官网，配合浏览器的开发者工具等。在遇到问题时，解决问题。