【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 效果