[layui初探]__layui的安装以及简单使用

• 前言
  最近有需要做前端界面的快速开发,于是就考虑到前端框架的使用,在了解下,选择了学习当下比较常用到的layui前端框架来进行前端后台的界面搭建.

---

首先我们来看一段layui官方的自我介绍:

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

通过这段介绍我们简单了解到其几个基本的特点:

• 第一是基于原生html/css/js的前端框架(多用于界面搭建),

• 第二,其实比较容易上手使用的,学习门槛比较低

• 第三,极简主义(其所有空间的设计都比较符合现代审美观,极简,扁平化等),

• 第四,体积小巧,但组件丰富.非常适合界面的快速开发.

• layui的安装与layui文档的使用

我们简单了解了layui之后,就需要动手安装并使用它了,

• 简单安装layui

访问官网,下载压缩包,解压并将其中的layui文件拷贝到自己对应的项目中.

image.png

image.png

image.png

这里需要注意的是,我们只需要layui文件夹,并不需要拷贝其他的多余文件.在安装完layui之后,记得将官网收藏,因为我们不是下载了就能够使用,我们还会需要访问其官方文档来学习该框架的使用方法.并且我们可以在其知识交流论坛进行交流学习.

• 如何学习layui

我们既然使用了别人的产品,那么最好的学习方式定然是通过产品说明书,即layui的文档.我们可以在layui官网上找到,文档,示例,社区,这三个重要的学习layui的资源地.

• 可以通过文档来一步步循序渐进的学习layui的使用,因为文档都是全面且详细的.

  
  
  

  image.png

• 可以通过示例来快速上手使用layui给我们提供的丰富的各种控件.

  
  
  

  image.png

• 可以通过社区来交流学习心得与查找碰到的bug与问题

image.png

• layui的简单使用

我们在了解并准备好了layui开发的工作后,就开始准备使用layui了.

首先浏览官方文档,并结合案例来说明:

• 在我们的资源加载到对应项目后,我们如何在我们的项目里引入layui.?

只需引入两个关键文件即可:
layui.css
layui.js

当然就是使用的传统的js,css文件引入的方式.

我们再来看一个官方的入门案例:

效果:会在界面中间弹出一条信息,这条信息我们通过代码知道其并不是一个标签,而是通过js代码来直接弹出的.是layer的一个msg方法弹出的.layer我们现在还不清楚.在之后进行学习.

image.png

通过这个案例我们发现了一点,这里的js代码是直接书写在body标签里的,这与我们平常通过引用纯js文件的方式不同,俺么我们能否使用传统的引用方式,将js代码单独写入js文件呢.答案当然是可以的.

我们完全可以使用传统的方法,来进行js文件的导入,但需要注意的是,我们一定需要引入laui.js文件,因为layui的诸多模块都与其关联,如果不引入它,项目是无法正常运行,使用layui中的各模块功能的.

---

• layui的模块化设计思想

前面简单了解到layui是采用模块规范编写的前端框架,之所以采用模块化来编写,是为了实现js的按需加载,使每个单独的标签或者属性都有单独的js模块与之对应,尝试以最简单的方式达到更高效的效果.

• 模块化的用法

其实我们在前面的基础案例中使用的就是模块化的使用方式,

使用模块化,需引入layui.js文件,并需通过layui.use来加载对应模块.
当然,在这个前提下,我们可以使用layui的模块规范建立入口文件,通过layui.use方法来加载该入口文件,如此我们就可以直接在外部书写纯js文件,并且不再需要使用use方法再次加载模块了.

我们通过一个实例看看:
html文件:

sty_module.js文件:

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

    layer.msg('hello world'); 

    exports('sty_module',{});  // 这里的exports参数必须与上面的use模块名对应,是模块输出的核心
});

使用模块化,我们要记住必须引入layui.js文件,我们可以发现layui是通过,layui.config().use();方法来建立接口文件的 .
其中base应当为接口js文件的绝对路径.use参数表示为接口文件的名称.

绝对路径:从储存的根目录下,直到当前文件所存放的目录,windows系统采用的路径方式就是绝对路径方式:

image.png

相对路径:相对路径是以当前文件所处的位置来相对的寻找其他文件的位置.这在js,css文件的引入上就是使用的这种方式:

image.png

• 非模块化的用法

当然,layui尽管是基于模块化的设计思想,但显然它也没有抛弃非模块化的使用方式(尽管他们并不推荐这种使用方式):
非模块化的使用类似于一次性加载,将其所有的模块一次性加载,如何来实现呢,layui将layui.js与所有的模块另合为了一个完整的js文件,我们只需要在项目中引用它即可一次加载所有模块,在使用时就无须再使用layui.use方法来加载模块了.

非模块化的使用,当然你必须了解,采用这种方式,就意味着layui模块化就失去了它的意义.但显然这种方式的使用会更加简单直接.

---

更新时间:
2019-6-11
19:50