layui框架的用法

這篇文章將為大家詳細講解有關layui框架的用法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

簡介

layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于2016年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

layui 兼容人類正在使用的全部瀏覽器（IE6/7除外），可作為 PC 端后臺系統與前臺界面的速成開發方案。

獲得Layui

1. 官網首頁下載

下載Layui到官網：https://www.layui.com/下載到 layui 的最新版，它經過了自動化構建，更適合用于生產環境。目錄結構如下：

2. Git 倉庫下載

你也可以通過GitHub或碼云得到 layui 的完整開發包，以便于你進行二次開發，或者 Fork layui 為我們貢獻方案

3. npm 安裝

npm install layui-src

一般用于 WebPack 管理

用法

1.模塊化的用法（推薦）

我們推薦你遵循 layui 的模塊規范建立一個入口文件，并通過 layui.use() 方式來加載該入口文件，如下所示：

<script>
layui.config({
  base: '/js/modules/' //你存放新模塊的目錄，注意，不是layui的模塊目錄
}).use('index'); //加載layui入口
</script>    
上述的 index 即為你/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時的模塊名一致
});

2.非模塊化用法

如果你并不喜歡 layui 的模塊化組織方式，你完全可以毅然采用“一次性加載”的方式，我們將 layui.js 及所有模塊單獨打包合并成了一個完整的js文件，用的時候直接引入這一個文件即可。當你采用這樣的方式時，你無需再通過 layui.use() 方法加載模塊，直接使用即可，如：

<script src="../layui/layui.all.js"></script>
<script>
//由于模塊都一次性加載，因此不用執行 layui.use() 來加載對應模塊，直接使用即可：
!function(){
//無需再執行layui.use()方法加載模塊，直接使用即可
var form = layui.form
,layer = layui.layer;
//…
}();
</script>

但你必須知道，采用該方式，意味著 layui 的模塊化已經失去了它的意義。但不可否認，它使用起來會更簡單直接。

關于layui框架的用法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。