찾다
웹 프론트엔드레이이 튜토리얼Layui 프레임워크란 무엇입니까?

Layui 프레임워크란 무엇입니까?

소개

layui(동음어: UI와 유사)는 자체 모듈 사양을 사용하여 작성된 프런트 엔드 UI 프레임워크로 기본 HTML/CSS/JS의 작성 및 구성 형식을 따릅니다. 매우 낮습니다. 사용 준비가 완료되었습니다. 외부는 미니멀하지만 내부는 꽉 차 있습니다. 크기가 가볍고 구성 요소가 풍부합니다. 핵심 코드부터 API까지 모든 세부 사항이 신중하게 제작되어 빠른 인터페이스 개발에 매우 ​​적합합니다. Layui의 첫 번째 버전은 2016년 황금빛 가을에 출시되었습니다. MVVM의 하위 계층을 기반으로 한 UI 프레임워크와는 다르지만 추세에 거스르지 않고 자연으로 돌아가는 것을 믿습니다. 정확하게 말하면 서버 측 프로그래머를 위해 더욱 맞춤화되었습니다. 다양한 프런트 엔드 도구의 복잡한 구성에 참여할 필요가 없으며 브라우저 자체와 모든 요소 및 상호 작용만 하면 됩니다. 당신의 손끝에서 필요한 것을 찾을 수 있습니다.

layui는 현재 인간이 사용하는 모든 브라우저(IE6/7 제외)와 호환되며, PC 측 백엔드 시스템 및 프런트엔드 인터페이스를 위한 빠른 개발 솔루션으로 사용할 수 있습니다.

Get Layui

1. 공식 홈페이지 홈페이지 다운로드

Layui 공식 홈페이지 다운로드: https://www.layui.com/ 자동으로 구축되어 더욱 적합한 최신 버전의 Layui를 다운로드하세요. 프로덕션 환경에서 사용합니다. 디렉토리 구조는 다음과 같습니다:

2. Git 저장소 다운로드

GitHub 또는 Code Cloud를 통해 Layui의 전체 개발 패키지를 다운로드하여 2차 개발을 수행하거나 Laui를 포크하여 솔루션을 제공할 수도 있습니다

3. npm 설치

npm install layui-src

는 일반적으로 WebPack 관리에 사용됩니다

관련 권장 사항: "layui 프레임워크 튜토리얼"

usage

1layui의 모듈 사양을 따르는 것이 좋습니다. 그리고 아래와 같이layui.use()를 통해 엔트리 파일을 로드합니다.

<script>
layui.config({
  base: &#39;/js/modules/&#39; //你存放新模块的目录,注意,不是layui的模块目录
}).use(&#39;index&#39;); //加载layui入口
</script>    
上述的 index 即为你/js/modules/ 目录下的 index.js,它的内容如下:
/**
项目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时的模块名一致
});

2. Non-modular Usage

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 프레임워크란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구