在项目 src 文件夹下新建一个 Layout 文件夹和新建Default.vue 布局页。打开 element-plus 官方文档，找到 Container 布局容器，找到自己合适的布局，复制代码，找到对应的样式 <!-- src/Layout/Default.vue --><template> <div class="common-layout">
一、https://element-plus.gitee.io/zh-CN/ 官网 二、后台布局Layui 代码示例如下 <template> <el-container> <el-aside width="200px"class="aside">Aside</el-aside> <el-container> <el-headerclass="header">Header</el-header> <el-mainclass="main">Main</el-main> </el-container> </...
<el-container> <el-aside :width="layoutisCollapse ? '64px':'200px'" class="elaside"> 后台管理系统 <!-- <el-divider /> --> <el-menu class="el-menu-vertical-demo" :collapse="layoutisCollapse
<el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> 1. 2. 3. 4. 5. 6. 7. 8. 9. LayOut.vue <template> <el-container> <el-header>Header</el-header> <el...
<template> <el-container> <el-header> 演示 一些Vue3的使用方法</el-header> <el-container> <el-aside width="200px"> <el-menu :default-active="1" class="el-menu-vertical-demo" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" router > <el-menu-item ind...
<el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-main>Main</el-main></el-container></el-container> LayOut.vue <template><el-container><el-header>Header</el-header><el-container><el-aside width="200px"><router-link to="/index...
<template><el-container><el-asidewidth="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container></el-container></template> 我们将这个布局抽离为两个组件,分别为一个header组件和一个aside组件,接下来开始抽离。 (三)模板组件抽离 Aside Header...
<el-container> <el-header>后台管理系统</el-header> <el-container> <el-asidewidth="200px"> <!-- 侧边栏开始--> <el-rowclass="tac"> <el-col:span="12"> <el-menu class="el-menu-vertical-demo" :default-openeds="['1']"
<template> <el-container class="container"> <el-aside class="aside"> <AppMenu/> </el-aside> <el-container> <el-header class="header">Header</el-header> <el-main class="main"><router-view/></el-main> </el-container> </el-container> </template> import AppMenu from '@/comp...
activeRule}/:morePath*`, component: Layout, }); }); // 创建路由实例 export const router: Router = createRouter({ history: createWebHistory(), routes: microRoutes.concat([ { path: "/", component: Layout, redirect: "/app1", }, ]), }); 在main.ts 入口处,添加注册信息 microApps....