vue3 layout 布局 设置

直接添加  src/layout.index.vue  内容如下

此时 一个大概的页面框架就已经有了  后续复杂的布局 直接使用相关 vue 模板框架即可

此处只是 初步了解 vue 从零搭建的过程

<!-- src/layouts/default/index.vue -->

<template>

  <el-container>

    <el-header style="background-color:#1789f5;">

      <div>

        header

      </div>

    </el-header>

    <el-container>

      <el-aside width="200px" >

        <el-affix>

          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"

            text-color="#fff" @open="handleOpen" @close="handleClose">

            <el-menu-item @click="$router.push('/home')" index="0">

                <span >Home</span>

              </el-menu-item>

            <el-sub-menu index="1">

              <template #title>

                <span>menu</span>

              </template>

                <el-menu-item  @click="$router.push('/menu1')" index="1-1">item one</el-menu-item>

                <el-menu-item  @click="$router.push('/menu2')" index="1-2">item two</el-menu-item>

                <el-menu-item  @click="$router.push('/menu3')" index="1-3">item three</el-menu-item>

            </el-sub-menu>

            <el-menu-item index="2">

              <span>Navigator Two</span>

            </el-menu-item>

          </el-menu>

        </el-affix>

      </el-aside>

      <el-main>

        <!-- 子路由出口 -->

        <router-view />

      </el-main>

    </el-container>

  </el-container>

</template>

<script setup >

</script>

<style scoped ></style>