layui(类ui)入门指南

简介: 开始使用 - 入门指南l        ayui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

开始使用 - 入门指南

l        ayui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

兼容性和面向场景

    layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案。

获得 layui

1. 官网首页下载

        你可以在我们的 官网首页 下载到 layui 的最新版,它经过了自动化构建,更适合用于生产环境。目录结构如下:

codelayui.code

  ├─css //css目录

  │  │─modules //模块css目录(一般如果模块相对较大,我们会单独提取,比如下面三个:)

  │  │  ├─laydate

  │  │  ├─layer

  │  │  └─layim

  │  └─layui.css //核心样式文件

  ├─font  //字体图标目录

  ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)

  │─lay //模块核心目录

  │  └─modules //各模块组件

  │─layui.js //基础核心库

  └─layui.all.js //包含layui.js和所有模块的合并文件


2. Git 仓库下载

        你也可以通过  得到 layui 的完整开发包,以便于你进行二次开发,或者 Fork layui 为我们贡献方案 


3. npm 安装

    codelayui.code

    npm install layui-src   


    一般用于 WebPack 管理

快速上手

            获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:

    ./layui/css/layui.css

    ./layui/layui.js //提示:如果是采用非模块化方式(最下面有讲解),此处可换成:./layui/layui.all.js


        没错,不用去管其它任何文件。因为他们(比如各模块)都是在最终使用的时候才会自动加载。这是一个基本的入门页面:

 

 

 

 


        如果你想采用非模块化方式(即所有模块一次性加载,尽管我们并不推荐你这么做),你也可以按照下面的方式使用:

 

 

 

 


经典,因返璞归真

        layui 定义为“经典模块化”,并非是自吹她自身有多优秀,而是有意避开当下JS社区的主流方案,试图以最简单的方式去诠释高效!她的所谓经典,是在于对返璞归真的执念,她以当前浏览器普通认可的方式去组织模块!我们认为,这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的最佳指引。所以 layui 本身也并不是完全遵循于AMD时代,准确地说,她试图建立自己的模式,所以你会看到:

//layui模块的定义

layui.define([mods], function(exports){


  //……


  exports('mod', api);

}); 

//layui模块的使用

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

  var mod = layui.mod1;


  //……


});   


        没错,她具备AMD的影子,又并非受限于 CommonJS 的那些条条框框,layui认为这种轻量的组织方式,比WebPack更符合绝大多数场景。所以她坚持采用经典模块化,也正是能让人避开工具的复杂配置,回归简单,安静高效地编织原生态的HTML、CSS和JavaScript。

        但是 layui 又并非是 Requirejs 那样的模块加载器,而是一款UI解决方案,她与Bootstrap最大的不同恰恰在于她糅合了自身对经典模块化的理解。

模块化的用法(推荐)

    我们推荐你遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:

codelayui.code

   


上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:

/**

  项目JS主入口

  以依赖layui的layer和form模块为例

**/   

layui.define(['layer', 'form'], function(exports){

  var layer = layui.layer

  ,form = layui.form;


  layer.msg('Hello World');


  exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致

});   


非模块化用法

如果你并不喜欢 layui 的模块化组织方式,你完全可以毅然采用“一次性加载”的方式,我们将 layui.js 及所有模块单独打包合并成了一个完整的js文件,用的时候直接引入这一个文件即可。当你采用这样的方式时,你无需再通过 layui.use() 方法加载模块,直接使用即可,如:

 


        但你必须知道,采用该方式,意味着 layui 的模块化已经失去了它的意义。但不可否认,它使用起来会更简单直接。

        也许通过上面的阅读,你已经大致了解如何使用 layui 了,但真正用于项目远不止如此,你需要继续阅读后面的文档,尤其是【基础说明】 

        那么,从现在开始,尽情地拥抱 layui 吧!但愿她能成为你长远的开发伴侣,化作你方寸屏幕前的亿万字节!

layui - 用心与你沟通

目录
相关文章
|
8月前
|
算法 数据可视化 程序员
【Qt UI】调色板QPalette类在Qt编程中的应用
【Qt UI】调色板QPalette类在Qt编程中的应用
249 0
|
8月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
29天前
|
监控 数据可视化 数据挖掘
UI 设计团队协作有妙招!哪类办公软件能拔高效率?
本文介绍了6款适合游戏原画团队的高效协作办公软件,包括板栗看板及5款国外软件。这些软件通过可视化任务管理、灵活的任务分配、强大的文件管理和版本控制、便捷的沟通机制等功能,帮助团队提升创作效率,促进成员间无缝协作,适应不同规模和需求的游戏原画项目。
47 15
|
2月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
123 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
4月前
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
52 2
React技术栈-React UI之ant-design使用入门
|
8月前
|
人工智能 前端开发 iOS开发
ui设计_入门ai、ps
ui设计_入门ai、ps
76 0
|
8月前
|
XML API Android开发
【Android 从入门到出门】第三章:使用Hilt处理Jetpack Compose UI状态
【Android 从入门到出门】第三章:使用Hilt处理Jetpack Compose UI状态
90 4
|
8月前
|
存储 XML 编译器
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
151 3
|
Web App开发 Dart 开发工具
谷歌移动UI框架Flutter入门
谷歌移动UI框架Flutter入门
【Element-ui】每个类只有一个默认设置选项
【Element-ui】每个类只有一个默认设置选项