Zusammenfassung der ersten Schritte mit Laui-Layui-Tutorial-php.cn

Zusammenfassung der ersten Schritte mit Laui

尚

Freigeben： 2019-11-27 11:56:44

nach vorne

2612 Leute haben es durchsucht

Zusammenfassung der ersten Schritte mit Laui

Holen Sie sich Layui

Sie können die neueste Version von Layui auf der offiziellen Website-Homepage herunterladen, oder Über GitHub erhält man das Open-Source-Paket für Layui. Derzeit werden nur diese beiden Ressourcenkanäle gleichzeitig verwaltet. Wenn Sie es für tatsächliche Projekte verwenden, wird im Allgemeinen empfohlen, es direkt von der offiziellen Website herunterzuladen. Die Struktur von Laui nach der Erstellung (d. h. das Paket, das Sie erhalten haben)

├─css   //css目录
    │  └─modules   //模块css目录（一般如果模块相对较大，我们会单独提取）
    │      ├─laydate
    │      ├─layer
    │      │  └─default
    │      └─layim
    │          └─skin
    ├─font    //字体图标目录
    ├─images   //图片资源目录（一些表情等）
    │  └─face
    └─lay    //JS目录
    │   ├─dest   //经过合并的完整模块
    │   └─modules   //各模块/组件
    └─layui.js

Nach dem Login kopieren

Schnell loslegen

Nachdem Sie Laui erhalten haben, stellen Sie es vollständig in Ihrem Projektverzeichnis bereit (bzw Statischer Ressourcenserver) müssen Sie nur die folgenden zwei Dateien einführen:

./layui/css/layui.css
./layui/layui.js

Nach dem Login kopieren

Richtig, Sie müssen sich um keine anderen Dateien kümmern. Weil sie (wie jedes Modul) automatisch geladen werden, wenn sie endgültig verwendet werden. Dies ist eine einfache Einstiegsseite:

<!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([&#39;layer&#39;, &#39;form&#39;], function(){
          var layer = layui.layer
          ,form = layui.form();
          
           layer.msg(&#39;Hello World&#39;);
          
        });
        
    </script> 
    </body>
</html>

Nach dem Login kopieren

Standardisierte Verwendung (empfohlen)

Wenn Sie Layui-Komponenten schnell verwenden möchten, können Sie das Skript-Tag trotzdem wie gewohnt einführen js-Datei und verwenden Sie dann die Komponenten von Laui in Ihrer js-Datei. Wir empfehlen Ihnen jedoch, die Modulspezifikationen von Layui zu befolgen und Ihr eigenes Modul als Eingang zu erstellen:

<script>
layui.config({
  base: &#39;/res/js/modules/&#39; //你的模块目录
}).use(&#39;index&#39;); //加载入口
</script>

Nach dem Login kopieren

Der obige Index ist index.js in Ihrem Verzeichnis /res/js/modules/ und sein Inhalt sollte wie folgt lauten :

<script>
/**
  项目JS主入口
  以依赖Layui的layer和form模块为例
**/    
layui.define([&#39;layer&#39;, &#39;form&#39;], function(exports){
  var layer = layui.layer
  ,form = layui.form();
  
  layer.msg(&#39;Hello World&#39;);
  
  exports(&#39;index&#39;, {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});    
</script>

Nach dem Login kopieren

Einfache und grobe Verwendung

Wenn Sie denken, dass Layuis Modularität immer noch etwas umständlich ist, spielt das keine Rolle. Layui berücksichtigt die Affen wie Sie. Wir verpacken und führen Layui.js und alle Module separat in einer vollständigen JS-Datei zusammen. Sie können diese Datei direkt importieren. Wenn Sie diese Methode anwenden, müssen Sie das Modul nicht mehr über Layui.use laden, sondern können es direkt verwenden, z. B.:

<script src="../layui/lay/dest/layui.all.js"></script>  
<script>
;!function(){
  //当使用了 layui.all.js，无需再执行layui.use()方法
  var from = layui.form()
  ,layer = layui.layer;
  
  //…
}();
</script>

Nach dem Login kopieren

Sie müssen jedoch wissen, dass diese Verwendungsmethode die Modularität von Layui bedeutet ist seine Bedeutung verloren gegangen. Aber es ist unbestreitbar, dass es einfacher ist als alles andere.

Weitere Laui-Kenntnisse finden Sie in der Spalte Tutorial zur Verwendung von Lauii.

Das obige ist der detaillierte Inhalt vonZusammenfassung der ersten Schritte mit Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!