Shulou(Shulou.com)06/03 Report--

This article mainly introduces what the layui front-end framework is, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Brief introduction

Layui (homophonic: class UI) is a front-end UI framework written by its own module specification, which follows the writing and organization form of native HTML/CSS/JS. It has a very low threshold and is ready to use. Its external minimalism, yet full inside, lightweight, rich components, from the core code to the API every detail has been carefully crafted, very suitable for the rapid development of the interface. The first version of layui, released in the golden autumn of 2016, is different from those UI frameworks based on the underlying MVVM, but does not go against the road, but believes in a return to basics. To be exact, it is more tailor-made for server programmers, you do not need to dabble in the complex configuration of various front-end tools, just face the browser itself, so that all the elements and interactions you need come in handy.

Layui is compatible with all browsers being used by human beings (except IE6/7), and can be used as a rapid development solution for the background system and foreground interface on the PC side.

Get Layui

1. Download the home page of the official website

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

2. Download Git Warehouse

You can also get the complete development package of layui through GitHub or Code Cloud, so that you can carry out secondary development, or Fork layui can contribute the solution to us.

3. Npm installation

Npm install layui-src

Generally used for WebPack management

Usage

1. Modular usage (recommended)

We recommend that you follow the module specification of layui to create an entry file and load it through layui.use (), as shown below:

Layui.config ({base:'/ js/modules/' / / the directory where you store the new module, note, it is not the module directory of layui) .use ('index') / / loading the index above in the layui entry is the index.js in your / js/modules/ directory, and its contents are as follows: / * * the main entry of the project JS takes layer and form modules that depend on layui as an example * * / layui.define (['layer',' form'], function (exports) {var layer = layui.layer,form = layui.form;layer.msg ('Hello World'); exports (' index', {})) / / Note, here is the core of the module output, and the module name must be the same as the module name in use})

two。 Non-modular usage

If you do not like the modular organization of layui, you can resolutely adopt the "one-time load" approach, we will layui.js and all modules separately packaged and merged into a complete js file, when using directly introduce this file. When you use this method, you no longer need to load the module through the layui.use () method, you can just use it, such as:

/ / since the modules are loaded at one time, you don't need to execute layui.use () to load the corresponding module, you can use it directly:! function () {/ / No need to execute the layui.use () method to load the module, you can use var form = layui.form,layer = layui.layer;// directly. } ()

But you have to know that adopting this approach means that the modularity of layui has lost its meaning. But there is no denying that it will be easier to use.

Thank you for reading this article carefully. I hope the article "what is the front-end framework of layui" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.