What is layui framework

Introduction

layui (homophone: UI-like) is a front-end UI framework written using its own module specifications , following the writing and organizational form of native HTML/CSS/JS, the threshold is extremely low, and it is ready to use. It is minimalist on the outside but full on the inside. It is light in size and rich in components. Every detail from the core code to the API has been carefully crafted, making it very suitable for rapid interface development. The first version of layui was released in the golden autumn of 2016. It is different from those UI frameworks based on the bottom layer of MVVM, but it does not go against the trend, but believes in returning to nature. To be precise, it is more tailored for server-side programmers. You do not need to get involved in the complex configuration of various front-end tools. You only need to face the browser itself, and all the elements and interactions you need can be found at your fingertips.

layui is compatible with all browsers currently used by humans (except IE6/7), and can be used as a quick development solution for PC-side backend systems and front-end interfaces.

Get Layui

1. Download from the official website homepage

Download Layui to the official website: https://www.layui.com/Download to layui The latest version, it has been built automatically and is more suitable for use in production environments. The directory structure is as follows:

2. Git warehouse download

You can also get the complete development package of layui through GitHub or Code Cloud to facilitate your secondary development, or Fork layui and contribute to us Solution

3. npm installation

npm install layui-src

Generally used for WebPack management

Related recommendations: "layui Framework Tutorial"

Usage

1. Modular usage (recommended)

We recommend that you follow layui’s module specification to create an entry file and load it through layui.use() The entry file is as follows:

<script>
layui.config({
  base: &#39;/js/modules/&#39; //你存放新模块的目录，注意，不是layui的模块目录
}).use(&#39;index&#39;); //加载layui入口
</script>    
上述的 index 即为你/js/modules/ 目录下的 index.js，它的内容如下：
/**
项目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时的模块名一致
});

2. Non-modular usage

If you don’t like layui’s modular organization, you can definitely use “one-time loading” In this way, 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 use this method, you no longer need to load the module through the layui.use() method, you can use it directly, such as:

<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
!function(){
//无需再执行layui.use()方法加载模块，直接使用即可
var form = layui.form
,layer = layui.layer;
//…
}();
</script>

But you must know that using this method means the modularization of layui has lost its meaning. But it is undeniable that it will be simpler and more straightforward to use.

The above is the detailed content of What is layui framework. For more information, please follow other related articles on the PHP Chinese website!