layui入门总结

来源：动视网责编：小采时间：2020-11-27 14:05:40

layui入门总结

layui入门总结:获得 Layui你可以在官网首页下载到 Layui 的最新版，也可以通过 GitHub 得到Layui的开源包。目前只同步维护这两处资源渠道。一般如果你是用于实际项目，推荐你直接从官网下载。layui构建后的结构（也就是你获得的包）├─css //css目录 │ └─mo

推荐度：

点击下载本文 文档为doc格式

导读layui入门总结:获得 Layui你可以在官网首页下载到 Layui 的最新版，也可以通过 GitHub 得到Layui的开源包。目前只同步维护这两处资源渠道。一般如果你是用于实际项目，推荐你直接从官网下载。layui构建后的结构（也就是你获得的包）├─css //css目录 │ └─mo

获得 Layui

你可以在官网首页下载到 Layui 的最新版，也可以通过 GitHub 得到Layui的开源包。目前只同步维护这两处资源渠道。一般如果你是用于实际项目，推荐你直接从官网下载。layui构建后的结构（也就是你获得的包）

├─css //css目录
 │ └─modules //模块css目录（一般如果模块相对较大，我们会单独提取）
 │ ├─laydate
 │ ├─layer
 │ │ └─default
 │ └─layim
 │ └─skin
 ├─font //字体图标目录
 ├─images //图片资源目录（一些表情等）
 │ └─face
 └─lay //JS目录
 │ ├─dest //经过合并的完整模块
 │ └─modules //各模块/组件
 └─layui.js

快速上手

获得layui后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：

./layui/css/layui.css
./layui/layui.js

没错，不用去管其它任何文件。因为他们（比如各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <title>开始使用Layui</title>
 <link rel="stylesheet" href="build/css/layui.css">
 </head>
 <!-- 你的HTML代码 -->
 <script src="build/layui.js"></script>
 <script>
 //一般直接写在一个js文件中
 layui.use(['layer', 'form'], function(){
 var layer = layui.layer
 ,form = layui.form();
 
 layer.msg('Hello World');
 
 });
 
 </script> 
 </body>
</html>

规范化的用法（推荐）

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

<script>
layui.config({
 base: '/res/js/modules/' //你的模块目录
}).use('index'); //加载入口
</script>

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

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

简单粗暴用法

如果你觉得Layui的模块化还是有点啰嗦，木有关系的亲。Layui考虑到了像你一样的猿群，我们将layui.js及所有模块单独打包合并成了一个完整的js文件，用的时候直接引入这一个文件即可。当你采用这样的方式，你无需再通过layui.use加载模块，直接使用即可，如：

<script src="../layui/lay/dest/layui.all.js"></script> 
<script>
;!function(){
 //当使用了 layui.all.js，无需再执行layui.use()方法
 var from = layui.form()
 ,layer = layui.layer;
 
 //…
}();
</script>

但你必须知道，这种使用方式，意味着Layui的模块化已经失去了它的意义。但不可否认，它比什么都来的简单。

更多layui知识请关注layui使用教程栏目。

layui入门总结

推荐度：

点击下载本文 文档为doc格式

标签：入门总结 ui

热门焦点

layui入门总结

layui入门总结

layui入门总结

最新推荐

猜你喜欢

热门推荐