自己动手开发UI组件库(VanUI)

为了初步统一H5项目里面的UI样式,也为了提升团队的开发效率,自己向优秀的UI开源项目学习,结合实际情况,模仿开发了这套UI样式库。这个项目本身来讲没什么太深的技术,但是对于我个人来说确实一个新的起点,使用了很多开源框架和组件,随着不断学习深入,也应该朝着独立开发UI组件的方向继续前行。通过对WeUI(微信团队开源的样式库)的学习模仿修改,形成了现在的VanUI。确实学习WeUI对我帮助很大,基于npm来构建项目,使用less来高效开发css,通过合理目录划分来方便团队协同开发。总之收益匪浅,VanUI遵循MIT协议。

 

VanUI第一个版本主要实现的功能包括:弹出层,按钮,图标字体,text input样式。功能很简单,以后进行逐步的丰富

目录结构:

项目构建工具:npm & npm scripts,less

package.json配置如下:

 

在线预览

 

源码参考目录结构,输入对应的URL即可下载(例如:https://zhangxuefei.site/vanui_1.0/dist/example.html)

作者:张雪飞
出处:https://zhangxuefei.site/p/1854
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注