Summary of getting started with layui-Layui Tutorial-php.cn

Summary of getting started with layui

尚

Release： 2019-11-27 11:56:44

forward

2652 people have browsed it

Summary of getting started with layui

Get Layui

You can download the latest version of Layui on the official website homepage, or you can go through GitHub gets the open source package for Layui. Currently, only these two resource channels are maintained simultaneously. Generally, if you are using it for actual projects, it is recommended that you download it directly from the official website. The structure of layui after construction (that is, the package you obtained)

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

Copy after login

Get started quickly

After obtaining layui, deploy it completely to your project directory (or Static resource server), you only need to introduce the following two files:

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

Copy after login

Yes, you don’t need to worry about any other files. Because they (such as each module) are automatically loaded when they are finally used. This is a basic introductory page:

<!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([&#39;layer&#39;, &#39;form&#39;], function(){
          var layer = layui.layer
          ,form = layui.form();
          
           layer.msg(&#39;Hello World&#39;);
          
        });
        
    </script> 
    </body>
</html>

Copy after login

Standardized usage (recommended)

If you want to use Layui components quickly, you can still introduce the script tag as usual Your js file, and then use layui's components in your js file. But we recommend that you follow Layui's module specifications and create your own module as the entrance:

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

Copy after login

The above index is the index.js in your /res/js/modules/ directory, and its content should be As follows:

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

Copy after login

Simple and rough usage

If you think Layui’s modularity is still a bit verbose, it doesn’t matter. Layui takes into account the apes like you. We package and merge layui.js and all modules separately into a complete js file. You can directly import this file when using it. When you adopt this method, you no longer need to load the module through layui.use, you can use it directly, such as:

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

Copy after login

But you must know that this method of use means that the modularity of Layui has been lost. its meaning. But it is undeniable that it is simpler than anything else.

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Summary of getting started with layui. For more information, please follow other related articles on the PHP Chinese website!