后台友好的前端框架LayUI

前言

最近在准备找工作的事项,但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE,但是VUE还是存在一定的学习成本,所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手,后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章,作为学习记录使用。

LayUI入门

    LayUI是开源模块化前端 UI 框架,由职业前端倾情打造,面向全层次的前后端开发者,易上手开箱即用的 Web UI 组件库。

入门指南

layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

入门

小试牛刀

    引入文件 将下载好的文件引入到工程。 验证引入成功的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引入 layui.css -->
    <!--<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">-->
    <!-- 引入 layui.js -->
    <!--<script src="//unpkg.com/layui@2.6.8/dist/layui.js">-->
    <meta charset="UTF-8">
    <title>LayUI初试</title>
    <!-- LauUI的核心CSS文件-->
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
    <!-- LauUI的核心JS文件,采用模块化引入-->
	<script src="./layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <script>
        console.log("aaaaaaaaaaaa");
        layui.use([layer, form], function(){
            var layer = layui.layer
                ,form = layui.form;
            console.log("aaaaaaaaaaaa");
            layer.msg(Hello World);
        });
    </script>
</body>
</html>
    访问文件 http://localhost:63342/mjlayui/01startLayui.html?_ijt=drtp672nrf003pp3jeecd7um01 证明文件引入成功。
经验分享 程序员 微信小程序 职场和发展