layui前端项目打包方法_前端 layui 框架快速上手

前端 layui 框架快速上手

layui(谐音: 类 UI) 是一款采用自身模块规范编写的前端 UI 框架, 下面本篇文章给大家谈谈如何快速上手 layui 框架. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.

一, 介绍

在使用 layui 之前, 我们先要了解一下 layui 是什么?

我觉得用作者贤心的一句话来概括就好了: 为后端程序员设计的前端框架.

更加详细的描述是: 这是一个封装了各种 CSS 和 JS,Ajax 等等的前端框架, 其封装程度之高, 有时甚至对程序员来说不大友好. 但对于前端技术一般的人来说, layui 不失为一个好的工具.

二, 开始使用 layui

使用方式: 下载后导入项目, 然后引用即可

先要引用 jQuery, 然后再引用 layui.JS 和 layui.CSS.

为什么一定要本地呢? 没有 CDN?

上面说了, layui 封装得太 "好" 了, 程序员的自主性受到限制, 这个时候需要修改 layui 的源码, 比如 CSS 的样式 -- 这也是 layui 的正确用法, 而不只是简单地使用.

layui 的模块: layui 是模块化的, 包括 form,layer,laydate,laypage 等等模块, 正是这些模块组成了完整的 layui. 使用 layui 的时候, 需要指明自己使用的模块.

开始使用 layui:

layui.use(['mod1','mod2'],function(args){

varmo1=layui.mod1

,mo2=layui.mod2;

});

三, layui 表单

下面以 html 中最常见的 form 表单来演示 layui 的使用.

HTML 部分:

注册新账户

method="POST">

邮箱

autocomplete="off"class="layui-input"/>