在项目 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> <e...
<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...
<template> <el-container class="container"> <el-aside class="aside" :style="{'width':(isCollapse?'63px':'230px')}"> <AppMenu :isCollapse="isCollapse"/> </el-aside> <el-container> <el-header class="header"> <el-row> <el-col :span="1"> <!-- el-icon size:number --> ...
<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...
activeRule}/:morePath*`, component: Layout, }); }); // 创建路由实例 export const router: Router = createRouter({ history: createWebHistory(), routes: microRoutes.concat([ { path: "/", component: Layout, redirect: "/app1", }, ]), }); 在main.ts 入口处,添加注册信息 microApps....
在写该章的时候,发现了前面的一个问题,在 BasicLayout.vue 的 article 标签上,少添加了一个属性:flex,这里代码和文章已经进行了修改。 通过前面的章节,我们实现了一个基本的布局,由左侧菜单栏和右侧内容栏组成,并实现了左侧菜单栏的基本功能。 实现之后的效果呢,如下图所示: ...
├── App.vue 入口文件├── api 接口文件目录├── assets 静态资源目录├── components 组件目录├── layout 布局文件目录├── main.js 入口 js├── router 路由文件目录├── store vuex 目录└── utils 项目工具类目录 通过命令创建以下目录和文件 ...