【GO】k8s 管理系统项目[前端部分–前端布局]

1. 前端布局

2. Layout

2.1 layout

src/layout/Layout.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-side width="200">Aside</el-side>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

2.2 路由

src/router/index.js

    {
        path: '/layout', 
        component: () => import('@/layout/Layout.vue'),
        icon: "odometer", //图标
        meta: {title:"Layout", requireAuth: false}, //定义meta元数据
    },

2.3 效果

达到了预期的效果

2.4 将home放到main

src/layout/Layout.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-side width="200">Aside</el-side>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

src/router/login.js

    {
        path: '/home',
        component: () => import('@/layout/Layout.vue'),
        icon: "odometer",
        meta: {title:"Layout", requireAuth: false},
        children: [
            {
                path: '/home', //视图
                component: () => import('@/views/home/Home.vue'),
                icon: "odometer", //图标
                meta: {title:"概要", requireAuth: false}, //定义meta元数据
            },
        ]
    },

效果

3. workload

3.1 Workload页面

3.1.1 创建目录和文件

创建src/workload目录

mkdir D:\golang\k8s-plantform-fe\src\views\workload
type nul > D:\golang\k8s-plantform-fe\src\views\workload\Deployment.vue
type nul > D:\golang\k8s-plantform-fe\src\views\workload\Pod.vue

src/views/workload/Deployment.vue

<template>
  <div class="home">
    我是Deployment.vue
  </div>
</template>

src/views/workload/Pod.vue

<template>
  <div class="home">
    我是Pod.vue
  </div>
</template>

3.2 路由

src/router/index.js

    {
        path: '/workload',
        component: Layout,
        icon: "menu", //图标
        meta: {title:"工作负载", requireAuth: false},
        children: [
            {
                path: '/workload/deployment',
                name: 'Deployment',
                icon: "el-icons-s-data", //图标
                meta: {title:"Deployment", requireAuth: true}, //定义meta元数据
                component: () => import('@/views/workload/Deployment.vue')
            },
            {
                path: '/workload/pod',
                name: 'Pod',
                icon: "el-icons-document-add", //图标
                meta: {title:"Pod", requireAuth: true}, //定义meta元数据
                component: () => import('@/views/workload/Pod.vue')
            },
        ]
    },

3.3 效果