雪花

vue3+ElementPlus 后台布局搭建

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

 

 

二、后台布局Layui

 

 代码示例如下

<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 等内容

 

 
 
 
 
 
 
 
 
 
 
 
 

 

posted @ 2023-03-01 13:32  十色  阅读(2350)  评论(1)  编辑  收藏  举报