Laui 시작하기 요약-레이이 튜토리얼-php.cn

Laui 시작하기 요약

尚

풀어 주다： 2019-11-27 11:56:44

앞으로

2577명이 탐색했습니다.

Laui 시작하기 요약

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

로그인 후 복사

표준화된 사용(권장)

Layui 구성 요소를 빠르게 사용하려면 평소처럼 js 파일에 스크립트 태그를 삽입한 다음 js 파일에서layui를 사용하세요. 구성 요소. 하지만 Layui의 모듈 사양을 따르고 입구로 자신만의 모듈을 만드는 것이 좋습니다.

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

로그인 후 복사

위 인덱스는 /res/js/modules/ 디렉터리에 있는 index.js이며 해당 내용은 다음과 같아야 합니다.

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

로그인 후 복사

단순하고 투박한 사용법

라유이의 모듈성이 조금 번거롭다고 생각되셔도 상관없습니다. 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의 모듈화가 의미를 잃었다는 것을 의미한다는 것을 알아야 합니다. . 하지만 무엇보다 간편하다는 사실은 부인할 수 없습니다.

더 많은 레이유 지식을 알고 싶으시면 레이유 사용법 튜토리얼 칼럼을 주목해주세요.

위 내용은 Laui 시작하기 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!