layui的自定义模块

这里提供一个基于layui的后台模板下载：https://share.weiyun.com/5GuYKyH

首页进入layui官网下载必要的文件，下载后目录如下：

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

并将css文件夹、layui.js、lay文件夹(内置模块,不需要则不用拷贝)拷贝到项目中。
先看看官方文档的介绍，再往下说：https://www.layui.com/doc/
定义一个名称为index.js的入口文件，内容如下：

<script>
    layui.config({
        base: '/public/static/layui/lay/modlues/' //你存放新模块的目录，注意，不是layui的模块目录
    }).extend({
    // 加载自定义模块
        index:'{/}/public/static/layui/js/index',
        login:'{/}/public/static/layui/js/login',
    }).use(['layer','form']); //加载入口 , form 是 lay 模块核心目录下的默认form模块

    //你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
    layui.extend({
       mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
    })
</script>

官网文档：https://www.layui.com/doc/base/modules.html，将入口文件引入html页面，
分别自定义模块名称为/public/static/layui/js/目录下的index.js与login.js文件，内容分别如下：

// index.js
layui.define(['layer'], function(exports){
    var obj = {
        login:function(param) {
            layer.msg(param);
        }
    };
  exports('index', obj); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});  
// login.js
 layui.define(['layer'],function(exports) {
    exports('login',function (callback) {
        callback && callback();
    });
});

然后就可以再项目中使用内置的模块与自定义的模块

layui.use(['form','index','login'],function(args) {
    layui.index.login(123111111111111111111111);
    layui.login(function() {
        console.log(456);
    });
    console.log(layui.form);
});