Detailed explanation of the construction of layui background framework

Release: 2019-12-02 16:19:37
forward
4828 people have browsed it

Detailed explanation of the construction of layui background framework

layui (homophone: UI-like) is a front-end UI framework written using its own module specifications. It follows the writing and organizational form of native HTML/CSS/JS. The threshold is extremely low. 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 grain, but believes in returning to nature. To be precise, it is more tailor-made 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.

1. Download layui from the official website (can be saved to any drive letter)

After the download is completed, you can see the following structure

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

2. Download layui from the Git repository Complete development package to facilitate secondary development

Download address: https://github.com/sentsin/layui/

3. npm installation (prerequisite is to install node.js first -----See the next section for node.js installation for this operation)

Detailed explanation of the construction of layui background framework

Generally used for WebPack management

4. After completing the above operations, create a new A project (here we take MVC as an example)

Then move the downloaded layui (completely, do not change the file name and other information) to the project

Detailed explanation of the construction of layui background frameworkDetailed explanation of the construction of layui background framework

5. Now that layui has been deployed, you can create a new page to view the effect.

Create a new layout page in MVC (some content in the frame is the same, so it can be reused, so create a new layout page. You can also create new master pages, user controls, etc. in other projects)

Address: http://www.layui.com/demo/admin.html Write the background layout

Detailed explanation of the construction of layui background framework

Select to get the layout code and paste the code into the layout page.

Create a new layout page and view page. In the main content area of ​​the layout page, add the @RenderBody() method. This is not the case for other projects. As follows

Detailed explanation of the construction of layui background frameworkAdd a view--

Detailed explanation of the construction of layui background frameworkRun the view and you will get the following effect

Detailed explanation of the construction of layui background frameworkAdd a jump link to list one in the layout page--

Detailed explanation of the construction of layui background framework

Create a new FormTable view (note that you need to add a layout page), add other elements, the form element added here, address: http://www.layui.com/demo/form.html, select View Code and paste the required code to Page--

After running the index.cshtml page, click List 1, the following effect will appear:

Detailed explanation of the construction of layui background framework

For more layui knowledge, please pay attentionlayui usage tutorial column.

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

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template