Layui学习之layui 的基本使用介绍

Layui学习之layui 的基本使用介绍

0、什么是LayUi

1. List itemlayui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
2. 其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。
3. layui 首个版本发布于 2016 年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。
4. 准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

1、Layui学习第一步之下载工具Layui下载地址

2、解压文件到电脑中的某一目录下。下载下来的文件结构如下：

  ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

3、将layui文件夹放入你所创建的工程中。

开发时需要在head中引入layui.css，以及在body中引入layui.js即可

 <link rel="stylesheet" href="../sources/layui/css/layui.css">
 <script src="../sources/layui/layui.js"></script>

4、引用：

<script src="jQuery的路径"></script>
<script src="layer.js的路径"></script>

5、 使用：

<script>
layer.msg('Hello World'); // 弹出
</script>