Fastadmin 如何引入 layui 模块

Posted 2021-03-17 jun-tutu

FastAdmin,php,Fastadmin引入layui模,fastadmin使用layui。

FastAdmin基于RequireJS进行前端JS模块的管理，因此如果我们需要再引入第三方JS插件，则必按照RequireJS的规则进行载入。如果你还不了解什么是RequireJS，可以先简单了解下RequireJS，相关链接：http://www.ruanyifeng.com/blog/2012/11/require_js.html

FasrAdmin 前台文件在 require-frontend.js 或 frontend-init.js 后台文件在 require-backend.js 或 backend-init.js 对应的文件，定义插件的名称和依赖。

其中 require-frontend.js 和 require-backend.js 是官方自己的写好的依赖和插件。而打开 frontend-init.js 和 backend-init.js 我们可以发现是空白的。那正好用于我们自己编写，方便管理。

 

接下来我们就在 backend-init.js中添加如下代码：

define([‘backend‘], function (Backend) {
    require.config({
        paths: {
            ‘layui‘: ‘../libs/layerui/layui/layui‘,
        },
        shim: {
            ‘layui‘:{
                deps:[‘css!../libs/layerui/layui/css/layui.css‘],
                exports: "layui"
            },
        }
    });
});

　　

首尾两行是backend-init.js中自带的，重点是require.config这部分。

pahts 内就是我们引入的js 模块名和路径。RequireJS 就是记载 js 文件的，所以定义到文件名即可 加载的文件 即是  ../libs/layerui/layui/layui.js

shim 是依赖配置，layui 它的依赖为一个CSS文件。如果插件没有依赖，则可以不写此部分。

exports这个为输出的变量名，表示在模块外部调用时返回的值，比如

require([‘layui‘], function(layui){
    //这里的layui的值就是layui这个变量的值
});

在对应的js 文件中调用 layui 模块

define([‘layui‘], function (undefined) {
    var Controller = {
        index: function () {
            //正常使用 layui 模块 即可
            layui.use(‘laydate‘, function(){
                var laydate = layui.laydate;
    
            }
    }
}    

　就可以在对应的 js 文件中愉快的使用 layui 了

 

　　特别注意的是，如果我们修改了require-backend.js或backend-init.js文件，在部署到生产环境前需要使用php think min -m all -r all压缩打包一下JS和CSS文件