Introducing layui into fastadmin and invoking layui interfaces

First Method: Global Introduction

First, go to the layui official website, download the entire repository, which includes the dist and src directories.

Place the downloaded layui in the following directory:

public/libs/layui

In the following file, add layui to paths and shim respectively:

public/assets/js/require-backend.js

require.config({
  paths: {
    // Add layui
    layui: "../libs/layui/src/layui",
  },
  // Shim dependency configuration
  shim: {
    // Add layui
    layui: {
      deps: ["css!../libs/layui/src/css/layui.css"],
      init: function () {
        console.log("Initialized layui here");
        return this.layui.config({ dir: "/assets/libs/layui/src/" });
      },
    },
  },
});

Calling in Target Page JS

define(["jquery", "bootstrap", "backend", "form", "table", "layui"], function (
  $,
  undefined,
  Backend,
  Form,
  Table,
  layui
) {
  var Controller = {
    index: function () {
      // Call here
      layui.use(["form", "upload"], function (form, upload) {});
    },
  };
  return Controller;
});

To compress and package both front-end and back-end JS and CSS in one go, execute the following command in the root directory and then refresh the browser after clearing the cache for the changes to take effect:

php think min -m all -r all

Second Method: Dynamic Introduction

First, define dependency configuration in public/assets/js/backend-init.js

define(['backend'], function (Backend) {
    require.config({
        paths: {
            'layui': '../libs/layui/src/layui',
        },
        shim: {
            'layui': {
                deps: ['css!../libs/layui/src/css/layui.css'],
                init: function () {
                    console.log("Initialized layui here")
                    return this.layui.config({ dir: '/assets/libs/layui/src/' });
                }
            }
        }
    })
});

Calling in Target Page JS

define(["jquery", "bootstrap", "backend", "form", "table", "layui"], function (
  $,
  undefined,
  Backend,
  Form,
  Table,
  layui
) {
  var Controller = {
    index: function () {
      //Call here
      require(["layui"], function (undefined) {
        layui.use(["form", "upload"], function (form, upload) {});
      });
    },
  };
  return Controller;
});