轱辘 UI
官方文档 https://frankfang.github.io/gulu/
GitHub https://github.com/FrankFang/gulu
轱辘 UI 是一个不太一样的 UI 框架.
本 UI 框架是一个面向源码阅读者的框架. 如果对你有帮助, 请不要吝惜你的 star.
也就是说, 我制作这个框架的目的就是让前端新人学习轮子的制作思路. 所有代码都追求可读性.
你可以通过查看逐个 commit 来学习本框架的制作思路
也可以通过我录制的视频 https://xiedaimala.com/courses/6d63da67-6eea-4711-aeb4-0c3a949341dc 来学习 (抱歉, 由于制作非常耗时, 所以视频是收费的. 不过项目搭建过程的录屏是免费的, 这几节视频能帮你快速从零开始本项目.)
如果你想从第一个 commit 开始看, 请点击这里 https://github.com/FrankFang/gulu/commits/master?after=36fbd6867d0a223184ad67e3d2bc3569e88847e0+104 .
如果你对代码有疑问, 欢迎提 issue https://github.com/frankfang/gulu/issues , 我会回答你的疑问. 也可以在本文末尾加群咨询.
本 UI 框架是基于 vue 2 实现的.
注意: 本 UI 框架的代码尚未完全完工(目前代码大概完成 50%), 请不要在生产环境中使用本 UI 框架.
你能学到什么
单元测试, 覆盖率, 持续集成等工程概念
重构, TDD/BDD, 设计模式, 单向数据流等技术概念
Vue 的几乎所有功能, 并且是深入理解这些功能, 而不是肤浅理解
有哪些轮子
简单轮子: 按钮, 输入框, 网格, 布局, Toast,Tabs,Popover, 手风琴(代码已完成)
进阶轮子: 级联选择, 无缝轮播, 响应式导航条, 分页, 表单验证, Table, 图片上传, Sticky,Tree,Suggestion,Datepicker(代码未完成)
其他: 路由, 状态管理(代码未完成)
注意: 这只是目前的计划, 具体要完成的轮子可能与上面有出入.
项目特点
使用 Travis CI 进行持续集成
有丰富的单元测试, 项目完成时, 期望测试覆盖率超过 90%
自说明的代码, 即使没有注释, 你也能看懂
初期我使用 parcel 构建方便新人上手, 后期改为 Vue Cli 3 以实现更多功能
背景
我几年前曾经发表过笨办法学前端一文, 当时我觉得开源社区里虽然有很多不错的库, 但是这些库都是以实用为主, 其源码并不适合新人阅读.
于是我业余时间用原生 JS 造了几个轮子放在 GitHub, 没想到居然有几百人关注, 还希望我能发布更详细的教程.
但是我当时并没有时间来做更详细的教程.
现在我终于...... 还是很忙, 不过我决定用每周六和周日来录制造轮子的视频.
这一次为了顺应前端的潮流, 我直接采用 Vue 2 来造轮子. 如果你正在学习 Vue 2, 那么轱辘 UI 的源码会非常适合你阅读.
视觉稿
本 UI 框架借鉴了一些成熟 UI 框架 (如 Framework7,Element UI 和 Ant Design) 的外观, 简化之后我自己制作了一个视觉稿 https://www.yuque.com/u29422/gulu/artboards/22283 .
如果你发现视觉稿有什么不足的地方, 可以直接在上面留言, 我也会看到.
为什么叫轱辘 UI
因为轱辘就是轮子的意思.
来源: https://juejin.im/post/5b7f81ece51d4538c210a0fc