如何快速上手LayUI

我本身是一个写后台的程序员,对于前台不是很感冒。每每遇到一些前台的问题就容易让我头疼,需要花很长的时间来调节一些样式。这里我推荐使用LayUI这款前台框架,对于一些不太喜欢写前台的小伙伴有很大的帮助哦~

废话不多说,上官网下载http://www.layui.com/一个最新的layui框架

需要提醒的是,使用LayUI前必须要引用两个文件,但是不是随随便便引用哦。它要分为两种用法:一种是模块化用法,另外一种是非模块化的用法。

如果使用模块化用法的时候需要引用

  1. ./layui/css/layui.css
  2. ./layui/layui.js
  3. 通过 layui.use() 方式来加载该入口文件

例:

/**

项目JS主入口

以依赖layui的layer和form模块为例

**/

layui.define(['layer', 'form'], function(exports){

var layer = layui.layer

,form = layui.form;

layer.msg('Hello World');

exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致

});

    ./layui/css/layui.css

当你采用这样的方式时,你无需再通过 layui.use() 方法加载模块,直接使用即可。采用该方式,意味着 layui 的模块化已经失去了它的意义。但不可否认,它使用起来会更简单直接。

例:

<script src="../layui/layui.all.js"></script>

<script>

;!function(){

//无需再执行layui.use()方法加载模块,直接使用即可

var form = layui.form

,layer = layui.layer;

//…

}();

</script>

 

posted @ 2018-04-10 10:34  老王家的大牛  阅读(1750)  评论(0编辑  收藏  举报

Hello Iwen