发布时间:2023-03-02 文章分类:编程知识 投稿人:王小丽 字号: 默认 | | 超大 打印

一、https://element-plus.gitee.io/zh-CN/ 官网

vue3+ElementPlus 后台布局搭建

二、后台布局Layui

vue3+ElementPlus 后台布局搭建

代码示例如下

<template>
  <div class="app_container">
    <div class="common-layout">
      <el-container>
        <el-aside width="200px" class="aside">Aside</el-aside>
        <el-container>
          <el-header class="header">Header</el-header>
          <el-main class="main">Main</el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
  export default{
    name: 'app',
    setup(){
    },
  }
</script>
<style scoped>
  /* 手动配置全局样式 */
  html,
  body,
  .app_container,
  .el-container{
    padding: 0;
    margin: 0;
    height: 100vh;
  }
  /* 背景颜色 */
  .aside{
    background-color: pink;
  }
  .main{
    background-color: forestgreen;
  }
  .header{
    background-color: aqua;
  }
</style>

仅展示 布局,后续,补充菜单、功能main 等内容