溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關layui的新手教程，以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
下載 Layui
你可以在官網首頁下載到 Layui 的最新版，也可以通過 GitHub 得到Layui的開源包。目前只同步維護這兩處資源渠道。一般如果你是用于實際項目，推薦你直接從官網下載。layui構建后的結構（也就是你獲得的包）
├─css //css目錄
│ └─modules //模塊css目錄（一般如果模塊相對較大，我們會單獨提取）
│ ├─laydate
│ ├─layer
│ │ └─default
│ └─layim
│ └─skin
├─font //字體圖標目錄
├─images //圖片資源目錄（一些表情等）
│ └─face
└─lay //JS目錄
│ ├─dest //經過合并的完整模塊
│ └─modules //各模塊/組件
└─layui.js快速上手
獲得layui后，將其完整地部署到你的項目目錄（或靜態資源服務器），你只需要引入下述兩個文件：
./layui/css/layui.css ./layui/layui.js
沒錯，不用去管其它任何文件。因為他們（比如各模塊）都是在最終使用的時候才會自動加載。這是一個基本的入門頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>開始使用Layui</title>
<link rel="stylesheet" href="build/css/layui.css">
</head>
<!-- 你的HTML代碼 -->
<script src="build/layui.js"></script>
<script>
//一般直接寫在一個js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form();
layer.msg('Hello World');
});
</script>
</body>
</html>規范化的用法（推薦）
如果你想快速使用Layui的組件，你還是跟平時一樣script標簽引入你的js文件，然后在你的js文件中使用layui的組件。但我們更推薦你遵循Layui的模塊規范，建立一個自己的模塊作為入口：
<script>
layui.config({
base: '/res/js/modules/' //你的模塊目錄
}).use('index'); //加載入口
</script>上述的 index 即為你 /res/js/modules/ 目錄下的 index.js，它的內容應該如下：
<script>
/**
項目JS主入口
以依賴Layui的layer和form模塊為例
**/
layui.define(['layer', 'form'], function(exports){
var layer = layui.layer
,form = layui.form();
layer.msg('Hello World');
exports('index', {}); //注意，這里是模塊輸出的核心，模塊名必須和use時的模塊名一致
});
</script>簡單粗暴用法
如果你覺得Layui的模塊化還是有點啰嗦，木有關系的親。Layui考慮到了像你一樣的猿群，我們將layui.js及所有模塊單獨打包合并成了一個完整的js文件，用的時候直接引入這一個文件即可。當你采用這樣的方式，你無需再通過layui.use加載模塊，直接使用即可，如：
<script src="../layui/lay/dest/layui.all.js"></script>
<script>
;!function(){
//當使用了 layui.all.js，無需再執行layui.use()方法
var from = layui.form()
,layer = layui.layer;
//…
}();
</script>但你必須知道，這種使用方式，意味著Layui的模塊化已經失去了它的意義。但不可否認，它比什么都來的簡單。
上述就是小編為大家分享的layui的新手教程了，如果您也有類似的疑惑，不妨參照上述方法進行嘗試。如果想了解更多相關內容，請關注億速云行業資訊。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
