YaYa-Layui-Admin-Plus模板使用手册

作者: 夜泊1990
企鹅: 1611756908
Q 群: 948233848
邮箱: hd1611756908@163.com
博客: https://hs-an-yue.github.io/
B 站: https://space.bilibili.com/514155929/

---

第一章 模板概述

第1节 模板简介

YaYa-Layui-Admin-Plus 基于 Layui 框架实现的一套 简单、方便、纯国产化前端管理模板，借助 Layui 强大的交互能力，可以让后端程序员告别前端繁琐的配置，快速使用此模板+后端服务构建出属于自己的系统，Layui 作者在设计此框架的时候就不是为前端开发设计的，Layui 的 UI 设计不够亮眼，但是他的交互能力非常强大，偏向于为后端程序员设计，方便后端程序员只要掌握简单的 HTML/CSS/JS 在结合 Layui 官网就可以快速建站。

第2节 优缺点

1. 优点
  1.1 基于 HTML/CSS/JS 原生开发，开发人员学习成本极低
  1.2 Layui框架提供了丰富的交互组件，例如:表单组件，表格组件，树形表格组件，树形组件，弹出层组件，使用简单方便
  1.3 模板显示页基于iframe开发，各个iframe之间互不影响，所以在每一个页面可以用非Layui技术,例如bootstrap、vue、element-ui等
2. 缺点
  2.1 Layui没有提供强大的UI组件，尽管也提供了UI组件，但是UI组件的审美不够主流
  2.2 社区不够活跃，不像vue一样社区提供了非常丰富的前端模板

第二章 下载和运行

第1节 下载

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

第2节 开发工具选择

开发工具建议选择 vscode - 运行采用Live Server插件
下载地址: https://code.visualstudio.com

第3节 运行

    ## 第三章 目录结构介绍

yaya-layui-admin-plus
├── assets                  # Gitee或者Github上README.md文件中显示的图片
├── css                     # yaya-layui-admin-plus模板的核心css文件
├────── index.css           # index.html首页的核心css
├────── menu.css            # index.html首页中左侧导航区域(菜单+LOGO+TITLE)的核心css
├────── yaya-common.css     # 整个模板中大部分页面需要用到的公共css配置在这里(这个属于个人喜好)
├── data                    # yaya-layui-admin-plus模板中的测试数据(例如左侧菜单生成数据,用户测试数据,部门测试数据等)
├── image                   # yaya-layui-admin-plus模板中用到的图片(登陆页面的背景图、网站用到的图标等)
├── js                      # yaya-layui-admin-plus模板中的核心JS文件
├────── yaya-admin-plus.js  # yaya-layui-admin-plus模板的核心JS文件(包含整个模板的核心功能的核心函数,例如 左侧菜单实现、选项卡实现等)
├────── xm-select.js        # 多功能下拉框库(第三方库)
├────── echarts.min.js      # 图表库(第三方库)
├── layui                   # Layui核心库
├── views                   # yaya-layui-admin-plus模板中提供的一些案例页面(不喜欢可以全部删掉,用户自己重新添加)
├── .gitignore              # Git配置文件,用于版本控制管理
├── DISCLAIMER.md           # 开源软件的免责声明文件
├── favicon.ico             # yaya-layui-admin-plus模板在预览时,浏览器选项卡上显示的图标
├── index.html              # yaya-layui-admin-plus模板首页
├── LICENSE                 # 开源软件的开源协议(MIT协议)
├── README.md               # yaya-layui-admin-plus模板的介绍文件

第四章 核心API介绍

第1节 核心CSS文件

核心CSS文件在项目的yaya-layui-admin-plus/css目录下

yaya-layui-admin-plus
├── css
├────── index.css			#首页的核心样式文件
├────── menu.css			#首页菜单的样式文件
├────── yaya-common.css		#一些公共样式配置

有对模板进行DIY兴趣的人可以通过修改这个几个文件的源码对模板进行样式的修改

第2节 核心JS文件

核心JS文件在项目的yaya-layui-admin-plus/js目录下

yaya-layui-admin-plus
├── js
├────── yaya-admin-plus.js #整个模板的默认核心功能都在这个文件中

有对模板进行DIY兴趣的人可以通过修改此文件的源码对模板进行交互方面的修改，文件中有详细的注释

第3节 生成导航菜单的数据介绍(重要)

左侧导航栏菜单的数据由后端获取,那数据格式应该遵循什么格式,接下来看介绍

[
    {
        "menuId": 10000,     //菜单ID
        "menuTitle": "工作台", //菜单名称
        "menuIcon": "layui-icon layui-icon-bot", //菜单图标
        "menuType": 2,  //菜单类型 1:目录 2:菜单
        "menuUrl": "views/workbench.html",//点击菜单跳转的地址,菜单类型为1时，为展开/合并菜单 为2时才是跳转功能,此属性在menuType为2时有效
        "children": [] //子菜单
    }
]

第五章 模板配置

项目运行起来以后，开始对模板进行配置，配置成自己公司想要的显示方式。

第1节 浏览器导航栏图标修改

浏览器导航栏图标是一个名字叫favicon格式是ico的图片，可以让UI工程师制作一个或者去网上下载，或者通过其他图片转成ico格式的文件

文件转换工具地址: https://ico.nyaasu.top/
网络上的转换工具有很多，可以自己去查找，将制作好的favicon.ico文件直接覆盖替换掉项目中的文件即可。

第2节 LOGO和标题修改

svg的图标文件可以去网上获取或者自己设计实现，我这里在阿里巴巴矢量图库获取的免费svg
阿里巴巴矢量图库地址: https://www.iconfont.cn/

将复制的svg标签替换掉我项目中的标签后
1. 修改svg标签的大小
2. 如果有需要还要设置颜色随主题变化

svg标签有width和height属性，设置svg标签的大小
还有svg内部的子标签还有fill属性，设置颜色填充，他还支持 fill="var(--tab-text)" var函数方式

第3节 默认首页修改

默认首页: 模板的左侧菜单是根据后端数据生成，但是有一个固定菜单一般不用后端数据生成，这个菜单通常情况叫首页菜单(我这个叫仪表盘)

需要修改的文件
1. index.html
2. yaya-admin-plus.js

第4节 个人中心页面修改

个人中心页面和模板首页类似都属于前端独立页面，不需要后端系统管理的页面，所以需要独立配置

需要修改的文件
1. index.html
2. yaya-admin-plus.js

第5节 新增模板主题

主题修改功能，在首页右上角图标
模板默认提供了三个主题，用户觉得不够可以DIY扩展

需要修改的文件
1. index.html
2. yaya-admin-plus.js
3. index.css

如果想扩展模板主题，可以查看逻辑自行实现

---