layui的新手教程

發(fā)布時間：2020-06-23 19:45:54 來源：億速云閱讀：978 作者：Leah 欄目：web開發(fā)

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)layui的新手教程，以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

下載 Layui

你可以在官網(wǎng)首頁下載到 Layui 的最新版，也可以通過 GitHub 得到Layui的開源包。目前只同步維護(hù)這兩處資源渠道。一般如果你是用于實際項目，推薦你直接從官網(wǎng)下載。layui構(gòu)建后的結(jié)構(gòu)（也就是你獲得的包）

├─css   //css目錄
    │  └─modules   //模塊css目錄（一般如果模塊相對較大，我們會單獨提?。?
    │      ├─laydate
    │      ├─layer
    │      │  └─default
    │      └─layim
    │          └─skin
    ├─font    //字體圖標(biāo)目錄
    ├─images   //圖片資源目錄（一些表情等）
    │  └─face
    └─lay    //JS目錄
    │   ├─dest   //經(jīng)過合并的完整模塊
    │   └─modules   //各模塊/組件
    └─layui.js

快速上手

獲得layui后，將其完整地部署到你的項目目錄（或靜態(tài)資源服務(wù)器），你只需要引入下述兩個文件：

./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>

規(guī)范化的用法（推薦）

如果你想快速使用Layui的組件，你還是跟平時一樣script標(biāo)簽引入你的js文件，然后在你的js文件中使用layui的組件。但我們更推薦你遵循Layui的模塊規(guī)范，建立一個自己的模塊作為入口：

<script>
layui.config({
  base: '/res/js/modules/' //你的模塊目錄
}).use('index'); //加載入口
</script>

上述的 index 即為你 /res/js/modules/ 目錄下的 index.js，它的內(nèi)容應(yīng)該如下：

<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的模塊化還是有點啰嗦，木有關(guān)系的親。Layui考慮到了像你一樣的猿群，我們將layui.js及所有模塊單獨打包合并成了一個完整的js文件，用的時候直接引入這一個文件即可。當(dāng)你采用這樣的方式，你無需再通過layui.use加載模塊，直接使用即可，如：

<script src="../layui/lay/dest/layui.all.js"></script>  
<script>
;!function(){
  //當(dāng)使用了 layui.all.js，無需再執(zhí)行l(wèi)ayui.use()方法
  var from = layui.form()
  ,layer = layui.layer;
  
  //…
}();
</script>

但你必須知道，這種使用方式，意味著Layui的模塊化已經(jīng)失去了它的意義。但不可否認(rèn)，它比什么都來的簡單。

上述就是小編為大家分享的layui的新手教程了，如果您也有類似的疑惑，不妨參照上述方法進(jìn)行嘗試。如果想了解更多相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊。

向AI問一下細(xì)節(jié)

layui的新手教程

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽