layui简单入门

layui:

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。非常适合界面的快速开发。layui 首个版本发布于2016年金秋.

官网下载文档查阅：http://www.layui.com

第三方支持：

Layui部分模块依赖jQuery（比如layer），但是你并不用去额外加载jQuery。Layui已经将jQuery最稳定的一个版本改为Layui的内部模块，当你去使用 layer 之类的模块时，它会首先判断你的页面是否已经引入了jQuery，如果没有，则加载内部的jQuery模块，如果有，则不会加载。

另外，我们的图标取材于阿里巴巴矢量图标库（iconfont），构建工具采用 Gulp 。除此之外，不依赖于任何第三方工具。

引用文件：

将解压包文件部署到项目中，引入两个文件

快速上手：

 
	
 

   
	//一般直接写在一个js文件中
	layui.use(['layer', 'form'], function(){
	  var layer = layui.layer
	  ,form = layui.form;
	  
	  layer.msg('Hello World');
	});
     

模块化的用法（推荐使用）：

如果想快速使用Layui的组件，跟平时一样script标签引入你的js文件，然后在你的js文件中使用layui的组件。但更推荐你遵循Layui的模块规范，建立一个自己的模块作为入口

    layui.config({
       base: '/res/js/modules/' //你存放新模块的目录，注意，不是layui的模块目录
    }).use('index'); //加载入口
 

上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下：

/**
  项目JS主入口
  以依赖layui的layer和form模块为例
**/    
layui.define(['layer', 'form'], function(exports){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
  
  exports('index', {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});