layui前端框架是什么

這篇文章主要介紹了layui前端框架是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

簡(jiǎn)介

layui（諧音：類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡(jiǎn)，卻又不失飽滿的內(nèi)在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細(xì)節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。layui 首個(gè)版本發(fā)布于2016年金秋，她區(qū)別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準(zhǔn)確地說，她更多是為服務(wù)端程序員量身定做，你無需涉足各種前端工具的復(fù)雜配置，只需面對(duì)瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。

layui 兼容人類正在使用的全部瀏覽器（IE6/7除外），可作為 PC 端后臺(tái)系統(tǒng)與前臺(tái)界面的速成開發(fā)方案。

獲得Layui

1. 官網(wǎng)首頁下載

下載Layui到官網(wǎng)：https://www.layui.com/下載到 layui 的最新版，它經(jīng)過了自動(dòng)化構(gòu)建，更適合用于生產(chǎn)環(huán)境。目錄結(jié)構(gòu)如下：

2. Git 倉(cāng)庫下載

你也可以通過GitHub或碼云得到 layui 的完整開發(fā)包，以便于你進(jìn)行二次開發(fā)，或者 Fork layui 為我們貢獻(xiàn)方案

3. npm 安裝

npm install layui-src

一般用于 WebPack 管理

用法

1.模塊化的用法（推薦）

我們推薦你遵循 layui 的模塊規(guī)范建立一個(gè)入口文件，并通過 layui.use() 方式來加載該入口文件，如下所示：

<script>layui.config({  base: '/js/modules/' //你存放新模塊的目錄，注意，不是layui的模塊目錄}).use('index'); //加載layui入口</script>    上述的 index 即為你/js/modules/ 目錄下的 index.js，它的內(nèi)容如下：/**項(xiàng)目JS主入口以依賴layui的layer和form模塊為例**/layui.define(['layer', 'form'], function(exports){var layer = layui.layer,form = layui.form;layer.msg('Hello World');exports('index', {}); //注意，這里是模塊輸出的核心，模塊名必須和use時(shí)的模塊名一致});

2.非模塊化用法

如果你并不喜歡 layui 的模塊化組織方式，你完全可以毅然采用“一次性加載”的方式，我們將 layui.js 及所有模塊單獨(dú)打包合并成了一個(gè)完整的js文件，用的時(shí)候直接引入這一個(gè)文件即可。當(dāng)你采用這樣的方式時(shí)，你無需再通過 layui.use() 方法加載模塊，直接使用即可，如：

<script src="../layui/layui.all.js"></script><script>//由于模塊都一次性加載，因此不用執(zhí)行 layui.use() 來加載對(duì)應(yīng)模塊，直接使用即可：!function(){//無需再執(zhí)行l(wèi)ayui.use()方法加載模塊，直接使用即可var form = layui.form,layer = layui.layer;//…}();</script>

但你必須知道，采用該方式，意味著 layui 的模塊化已經(jīng)失去了它的意義。但不可否認(rèn)，它使用起來會(huì)更簡(jiǎn)單直接。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayui前端框架是什么”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!