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