1
2
3
4
5
6
| 作者: 夜泊1990
企鹅: 1611756908
Q 群: 948233848
邮箱: hd1611756908@163.com
博客: https://hs-an-yue.github.io/
B 站: https://space.bilibili.com/514155929/
|
第一章 模板概述
第1节 开源地址
1
2
| gitee : https://gitee.com/ukoko/yaya-layui-admin-plus
github : https://github.com/hs-an-yue/yaya-layui-admin-plus
|
第2节 模板介绍
YaYa-Layui-Admin-Plus 基于Layui 开发的一套简单、方便的前端管理模板，抛弃当前流行的脚手架项目构建方式，开发人员只需要掌握简单的HTML/CSS/JS(JQuery)基础知识即可使用，开发和维护成本极低.
第二章 开发工具选择
1
| 作者建议使用 VSCode工具，方便开发时进行前后端联调
|
第三章 代码克隆
1
2
| gitee命令 : git clone https://gitee.com/ukoko/yaya-layui-admin-plus.git
github命令: git clone https://github.com/hs-an-yue/yaya-layui-admin-plus.git
|
第四章 项目配置和运行
以vscode开发工具为例
第1节 安装Live Server
1
| vscode工具已经安装好了Live Server
|
第2节 导入项目
第3节 项目运行
第4节 浏览器预览
第五章 项目目录介绍
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| yaya-layui-admin-plus
├── assets
├── css
├── data
├── image
├── js
├── layui
├── views
├── .gitignore
├── DISCLAIMER.md
├── favicon.ico
├── index.html
├── LICENSE
├── login1.html
├── login2-government.html
├── README.md
|
第六章 目录内容详解
第1节 样式核心(css)
1
2
3
4
5
| ├── css # 核心css
├────── index.css # index.html首页css样式配置文件
├────── menu.css # index.html页面左侧菜单栏的css样式配置文件
├────── yaya-common.css # 为YaYa模板布局提供了一些常见样式，布局容器、比如容器鼠标移入添加动画、布局面板等
├────── yaya-style-extend.css # 为YaYa模板提供了一些扩展样式，例如按钮扩展、标签徽章扩展等
|
第2节 交互核心(js)
1
2
3
4
| ├── js # 核心JS文件
├────── yaya-admin-plus.js # YaYa模板核心文件,包含菜单生成、选项卡操作、面包屑功能等
├────── xm-select.js # 多功能下拉框库(第三方库)
├────── echarts.min.js # 图表库(第三方库)
|
第3节 案例页面(views)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| 案例页面,按照需求自行进行增删。
├── views # 案例页面
├────── dashboard.html # 仪表盘页
├────── dept-add.html # 部门添加
├────── dept-list.html # 部门列表
├────── extend-about.html # 关于我
├────── extend-badge.html # 徽章和标签扩展
├────── extend-button.html # 按钮扩展
├────── extend-color.html # 颜色推荐
├────── extend-iconfont.html # 字体图标扩展
├────── extend-layout-1.html # 布局1(紧凑)-如果布局想紧凑一些,就选这个页面做为模板
├────── extend-layout-1-demo.html # 布局1样例
├────── extend-layout-2.html # 布局2(舒缓)-如果布局想宽松一些,就选这个页面做为模板
├────── extend-layout-2-demo.html # 布局2样例
├────── extend-search.html # 条件搜索扩展-页面一般都是上面是搜索框,下面是表格,此页面提供了多种搜索样式
├────── menu-list.html # 菜单树形列表
├────── notice-detail.html # 消息详情
├────── notice-list.html # 消息列表
├────── personal-center.html # 个人中心页
├────── personal-center-password-edit.html # 个人中心修改密码
├────── personal-center-user-edit.html # 个人中心修改用户
├────── tree-menu1.html # 多级菜单1
├────── tree-menu2.html # 多级菜单2
├────── tree-menu3.html # 多级菜单3
├────── tree-menu4.html # 多级菜单4
├────── user-add.html # 用户添加
├────── user-import.html # 用户导入
├────── user-list.html # 用户列表
├────── workbench.html # 工作台
|
第七章 模板最佳实践
1
2
3
4
5
| 第一步: 选择布局模板,去布局模板中，选择一个喜欢的布局方式，如果没有可以自定义一个
紧凑型 : views/extend-layout-1.html
紧凑型样例 : views/extend-layout-1-demo.html
舒缓型 : views/extend-layout-2.html
舒缓型样例 : views/extend-layout-2-demo.html
|
1
2
3
| 第二步: 模板选择好后,管理系统的页面基本上千篇一律，上层: 搜索条件 下层:表格显示
去组件管理中/搜索组件（views/extend-search.html）挑选一个喜欢的搜索样式，如果没有喜欢的可以自定义一个
再去Layui官网复制数据表格,普通表格或者树状表格
|
不怕慢，就怕站