layui使用总结

1,740 阅读2分钟

背景

在做一个管理系统,服务端接口都开发完了,开始做页面,无意间看到layUI,看别人做的系统效果还不错。于是拿来做自己系统的UI,感觉上手还比较容易。做到后面发现官方文档写的过于简单了,有些实现自己摸索,有些是参考了别人的例子。下面就说说如何使用。

实践

一、使用步骤

  •  从官网:www.layui.com/下载使用,文旦和示例都在一起,赞一个,方便开发者查阅。

  • 文件结构如下,直接引入到项目目录即可。

  • 使用时要配合jQuery,所以要先引入jQuery,然后再引入layUI。

  • 页面引入之后,根据实际用的组件,参考官方文档的样例来操作接口。注:要想做出效果,必要要严格遵守layUI的格式,如果自己太随意定义会出现不可控,而且排查起来很不方便。开始我就是自己定义,没有出来效果,费了好多时间排查问题,最后还是回到文档的格式上。希望后面学习的小伙伴们不要跳类似的坑。

二、总结 

  • 建议小伙伴从上到下一点一点的学习,这样到后面的组件使用时顺理成章的。我是用什么就找相应的组件,由于本身就不是很熟悉,所以走了一些弯路。但是在实操中,大部分同学跟我的经历是类似的。先失效效果交工,但是一定要在业余或者项目时间富裕的时候再花些时间从头到尾看一遍,这样整体性更强,理解和使用也更深刻。
  • 插件扩展也很好。我主要是用到了Excel的扩展插件,导出Excel实现起来很方便。插件使用如下图,数据参考文档

  • layUI的官方文档写的过于简单,希望官方作者能够意识到这点,场景覆盖再全一点就更好了。
  • 插件扩展中有好多组件,如果要做什么功能先看是否有已经写好的,防止重复造轮子。