我使用的是LayUI做前端框架，原因很简单，网上现成代码，上手简单，自由度高，效果齐全，就官网的文档还是不够好，很多好东西都没列出来，要靠自己挖掘。
现在我准备用官网的iframe版做个管理系统后台，之前已经写过一个单页版的，需求分析已经写好，页面大概50页，8个功能模块，1个公共模块，1个登录。
看代码前，先记录一下页面3个基本方法：layui.config、layui.extend、layui.define
layui.config：初始化配置，可以把固定js，主题和use需要的扩展模块都包含进来。（目前就觉得有这个做法）
layui.extend：指定自己的路径
layui.define：定义自己的组件，也能使用里面的组件，跟layui.use有点像
再提一点，官方建议线上调用layer.all.js，可以免去调用组件，直接使用。听起来不错。
好了，下面是代码部分：
html代码
<!--head-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/scripts/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/scripts/layui/admin.css" media="all">
<!--js调用 -->
<script src="/scripts/layui/layui.all.js"></script>
<script>
layui.config
({
base: '/scripts/'//静态路径
}).extend({
index: 'lib/index'//主入口
}).use('index');
</script>
<!--body-->
<body class="layui-layout-body">
<div id="LAY_app">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<!-- 头部区域 -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item layadmin-flexible" lay-unselect>
<a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="http://www.layui.com/admin/" target="_blank" title="前台">
<i class="layui-icon layui-icon-website"></i>
</a>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;" layadmin-event="refresh" title="刷新">
<i class="layui-icon layui-icon-refresh-3"></i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search" layadmin-event="serach" lay-action="template/search.html?keywords=">
</li>
</ul>
<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
<li class="layui-nav-item" lay-unselect>
<a lay-href="app/message/index.html" layadmin-event="message" lay-text="消息中心">
<i class="layui-icon layui-icon-notice"></i>
<!-- 如果有新消息，则显示小圆点 -->
<span class="layui-badge-dot"></span>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="javascript:;" layadmin-event="theme">
<i class="layui-icon layui-icon-theme"></i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="javascript:;" layadmin-event="note">
<i class="layui-icon layui-icon-note"></i>
</a>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="javascript:;" layadmin-event="fullscreen">
<i class="layui-icon layui-icon-screen-full"></i>
</a>
</li>
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;">
<cite>贤心</cite>
</a>
<dl class="layui-nav-child">
<dd><a lay-href="set/user/info.html">基本资料</a></dd>
<dd><a lay-href="set/user/password.html">修改密码</a></dd>
<hr>
<dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-hide-xs" lay-unselect>
<a href="javascript:;" layadmin-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
</li>
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
<a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
</li>
</ul>
</div>
<!-- 侧边菜单 -->
<div class="layui-side layui-side-menu">
<div class="layui-side-scroll">
<div class="layui-logo" lay-href="home/console.html">
<span>layuiAdmin</span>
</div>
<ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
<li data-name="home" class="layui-nav-item layui-nav-itemed">
<a href="javascript:;" lay-tips="主页" lay-direction="2">
<i class="layui-icon layui-icon-home"></i>
<cite>主页</cite>
</a>
<dl class="layui-nav-child">
<dd data-name="console" class="layui-this">
<a lay-href="home/console.html">我的资料</a>
</dd>
<dd data-name="console">
<a lay-href="home/homepage1.html">主页一</a>
</dd>
<dd data-name="console">
<a lay-href="home/homepage2.html">主页二</a>
</dd>
</dl>
</li>
<li data-name="component" class="layui-nav-item">
<a href="javascript:;" lay-tips="组件" lay-direction="2">
<i class="layui-icon layui-icon-component"></i>
<cite>组件</cite>
</a>
<dl class="layui-nav-child">
<dd data-name="grid">
<a href="javascript:;">栅格</a>
<dl class="layui-nav-child">
<dd data-name="list"><a lay-href="component/grid/list.html">等比例列表排列</a></dd>
<dd data-name="mobile"><a lay-href="component/grid/mobile.html">按移动端排列</a></dd>
<dd data-name="mobile-pc"><a lay-href="component/grid/mobile-pc.html">移动桌面端组合</a></dd>
<dd data-name="all"><a lay-href="component/grid/all.html">全端复杂组合</a></dd>
<dd data-name="stack"><a lay-href="component/grid/stack.html">低于桌面堆叠排列</a></dd>
<dd data-name="speed-dial"><a lay-href="component/grid/speed-dial.html">九宫格</a></dd>
</dl>
</dd>
<dd data-name="button">
<a lay-href="component/button/index.html">按钮</a>
</dd>
<dd data-name="form">
<a href="javascript:;">表单</a>
<dl class="layui-nav-child">
<dd><a lay-href="component/form/element.html">表单元素</a></dd>
<dd><a lay-href="component/form/group.html">表单组合</a></dd>
</dl>
</dd>
<dd data-name="nav">
<a lay-href="component/nav/index.html">导航</a>
</dd>
<dd data-name="upload">
<a href="javascript:;">上传</a>
<dl class="layui-nav-child">
<dd data-name="demo1">
<a lay-href="component/upload/demo1.html" lay-text="上传功能演示一">功能演示一</a>
</dd>
<dd data-name="demo2">
<a lay-href="component/upload/demo2.html" lay-text="上传功能演示二">功能演示二</a>
</dd>
</dl>
</dd>
</dl>
</li>
<li data-name="template" class="layui-nav-item">
<a href="javascript:;" lay-tips="页面" lay-direction="2">
<i class="layui-icon layui-icon-template"></i>
<cite>内容</cite>
</a>
<dl class="layui-nav-child">
<dd><a lay-href="template/personalpage.html">个人主页</a></dd>
<dd><a lay-href="template/addresslist.html">通讯录</a></dd>
<dd><a lay-href="template/caller.html">客户列表</a></dd>
<dd><a lay-href="template/goodslist.html">商品列表</a></dd>
<dd><a lay-href="template/msgboard.html">留言板</a></dd>
<dd><a lay-href="template/search.html">搜索结果</a></dd>
<dd><a href="user/reg.html" target="_blank">注册</a></dd>
<dd><a href="user/login.html" target="_blank">登入</a></dd>
<dd><a href="user/forget.html" target="_blank">忘记密码</a></dd>
<dd><a lay-href="template/tips/404.html">404页面不存在</a></dd>
<dd><a lay-href="template/tips/error.html">错误提示</a></dd>
<dd><a lay-href="//www.baidu.com/">百度一下</a></dd>
<dd><a lay-href="//www.layui.com/">layui官网</a></dd>
<dd><a lay-href="//www.layui.com/admin/">layuiAdmin官网</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<!-- 页面标签 -->
<div class="layadmin-pagetabs" id="LAY_app_tabs">
<div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
<div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
<div class="layui-icon layadmin-tabs-control layui-icon-down">
<ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
<li class="layui-nav-item" lay-unselect>
<a href="javascript:;"></a>
<dl class="layui-nav-child layui-anim-fadein">
<dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
<dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
<dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
<ul class="layui-tab-title" id="LAY_app_tabsheader">
<li lay-id="home/console.html" lay-attr="home/console.html" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="layui-body" id="LAY_app_body">
<div class="layadmin-tabsbody-item layui-show">
<iframe src="home/console.html" frameborder="0" class="layadmin-iframe"></iframe>
</div>
</div>
<!-- 辅助元素，一般用于移动设备下遮罩 -->
<div class="layadmin-body-shade" layadmin-event="shade"></div>
</div>
</div>
</body>
来源：https://www.cnblogs.com/laokchen/p/12348299.html