layui入门适用于初学者（内附交流群）

layui使用

个人感觉layui比bootstrap好用，它里面封装了很多东西，而且感觉比bootstrap更加美观（可能国人的框架更符合国人）
首先我们要去她的官网或者去github上面去下源代码，文件不大就几兆，我一般去官网下载下来就可以了（个人感觉更方便）。
layui官网:https://www.layui.com/
layui的github:https://github.com/sentsin/layui/
我们下载好了压缩包之后就进行解压，从下载的压缩包后面我们可以知道layui的版本，解压后就是这个样子：

我们只用layui这个文件夹就可以了。
把layui文件夹复制到自己的项目里面去：
这样我们就可以开始使用layui提供的样式和一些javascript。

建立一个页面

我们进入官网后点击示例，选择自己想要的页面（我选择的是form表单里面），点进去以后可以预览到效果：

可以根据自己的需求进行筛选，选定好了之后就点击查看代码就可以看到代码，这时我们只需要Ctrl+A Ctrl+C把代码给复制了，然后再去自己项目里面新建一个html页面，我是放在html文件夹里面名字是demo，粘贴（Ctrl+V）进去，注意：如果新建的页面有html、body等标签应先删除再进行粘贴不然会报错
这时我们先用浏览器打开一下观察一下效果：

我们要更改两个地方：
1.
这里是layui样式的默认路径，这里我们要改成自己的路径，根据我demo.html页面的位置我的路径是：

<link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

…表示返回上一层，我的页面是在html文件夹里面的，我们要访问layui文件夹
2.

这是layui的js默认路径，我的路径是：

<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

这里跟上面的css不同是因为文件存储位置不同：

改好了后我们在次用浏览器打开就实现了预览的效果：

注意事项

引入layui里面的js时有两种引用的方法，一种是像我们之前那样引入的是layui.js是模块化的加载，最终再使用的时候才会自动加载，这种方式要在<script标签里面写出要用到的模块：

<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 

，不然会发现使用不了一些东西，这也是官方推荐的方法。
另一种是在引入时一次性把模块全部导入，就是把上面的layui.js改为layui.all.js，这样使用是全部模块一次性导入的，虽然不用再声明使用的模块，但是官方不推荐这样用。经过我亲身体验也觉得不要这样用，这样会导致页面加载很明显的卡顿，而且加载图片时会更慢，严重影响用户体验。

遇到问题

开发过程中遇到问题，首先得详细查看自己使用的那一部分的相关文档，大部分问题是文档漏看了没看完等问题，如果看了文档还没有解决推荐你去Fly社区去搜一下(现在社区已经关闭了。。。)，有问题加layui的交流群去问下群里面的大佬，问问题时没人解答的现象很正常，可能是太简单的问题不想回你，也可能是被其他话题给遮住了，这时候等大佬们聊完天再去问问。有时大佬让你贴代码的时候不要直接粘源码发群里面！！！ 可以截图发群里面，我喜欢用QQ截图（Ctrl+Alt+A），截完图后可以把重点部分用红色框框出来，这时大佬看你这么上道肯定会给你解答问题了。真正需要源码的时候用个txt文件装起来，不要图省事直接把整个html拉进去。。
说了这么多上个交流群图（我不是群主。。
几个交流群好像就5群比较活跃，如果人满了的话会提示加其他群聊。
遇到问题时请教别人时态度要好，我遇到好几个进群问问题没人理就骂骂咧咧的退群了。。
借鉴下学过的《送东阳马生序》：先达德隆望尊，门人弟子填其室，未尝稍降辞色。余立侍左右，援疑质理，俯身倾耳以请；或遇其叱咄，色愈恭，礼愈至，不敢出一言以复；俟其欣悦，则又请焉。故余虽愚，卒获有所闻。

文章若有帮助，烦请扫码支持