Layui 入门和安装

本节课我们来开始了解 Layui 这款前端 UI 框架的介绍和安装方法。

一．Layui 简介

1. Layui(类 UI)，是一款遵循原生 HTML/CSS/JS 书写的，门槛极低的 UI 框架；
2. 它有别于现在的 MVVM 底层的 UI 框架，返璞归真，为服务端程序员量身打造；
3. 无须各种前端工具配置，不需要 Node 环境，只针对浏览器本身，拿来就用；
4. 它的应用场景主要 PC 端的后台系统 UI，以及前台 UI 的快速开发；
5. 学习 Layui 基础为：HTML5/CSS/JavaScript/ES6+，再有一门后端语言最佳；

二．Layui 安装

1. 官网提供了很多种下载方式，最方便的就是首页的立即下载按钮，简单粗暴；
2. 下载好后，我们先打开 webStorm 开发工具，创建 Layui 空项目待用；
3. 然后解压下载好的 Layui2.5.6，找到 layui 包，复制到 Layui 项目中去；
4. 展开 layui 包，可以看到目录结构，官网提供的信息如下：
├─css //css 目录
│ │─modules //模块 css 目录（如果模块相对较大，我们会单独提取，如下三）
│ │ ├─laydate
│ │ ├─layer
│ │ └─code.css
│ └─layui.css //核心样式文件，另增 layui.mobile.css
├─font //字体图标目录
├─images //图片资源目录（目前只有 layim 和编辑器用到的 GIF 表情）
│─lay //模块核心目录
│ └─modules //各模块组件
│─layui.js //基础核心库
└─layui.all.js //包含 layui.js 和所有模块的合并文件【十天精品课堂系列】 主讲：李炎恢
5. 创建 01/01.html，引入基本的 layui 包括一个 css 和一个 js 文件；
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
6. 这个 layui.js(7k)不包含模块组件，只是核心库，所以要使用组件需要加载；

<script src="../layui/layui.js"></script>
<script>
//加载 layer.js
layui.use(['layer', 'form'], () => {
//声明对象，省略貌似也行，但部分会有异常
const layer = layui.layer
//弹出层
layer.msg('Hello, Layui!')
})
</script>

7. 还有一个 layui.all.js(271k，全模块)，包含了所有模块，不需要加载模块；

<script src="../layui/layui.all.js"></script>
<script>
//需要等待页面加载完毕在执行弹窗
layui.layer.ready(() => {
layui.layer.msg('Hello, Layui!')
})
</script>

PS：官方手册建议开发阶段使用 layui.js(模块化加载)，方便开发阶段的调试；
PS：而线上阶段采用 layui.all.js(全模块)，减少静态资源的请求；