使用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"
    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官网，配合浏览器的开发者工具等。在遇到问题时，解决问题。