第二節 Layui · ThinkPHP實用開發工具箱

[TOC] ***** # Layui簡介 layui（諧音：類UI) 是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。layui 首個版本發布于 2016 年金秋，她區別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，她更多是為服務端程序員量身定做，你無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。 # 安裝Layui Github：[Layui](https://github.com/sentsin/layui/) 碼云：[Layui](https://gitee.com/sentsin/layui) 官方下載：[官方 v2.5.5.zip](https://res.layui.com/static/download/layui/layui-v2.5.5.zip?v=) # 使用手冊官方手冊：[官方手冊](https://www.layui.com/doc/) # 獨立組件 ## Layer 官方下載：[官方 v3.1.1.zip](http://res.layui.com/static/download/layer/layer-v3.1.1.zip) 官方手冊：[官方手冊](http://layer.layui.com/?alone) ## LayDate # 第一個頁面 ``` <!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="../layui/css/layui.css"> </head> <body>  <script src="../layui/layui.js"></script> <script> //一般直接寫在一個js文件中 layui.use(['layer', 'form'], function(){ var layer = layui.layer, form = layui.form; layer.msg('Hello World'); }); </script> </body> </html> ```