轱辘 UI

官方文档

轱辘 UI 是一个不太一样的 UI 框架。

本 UI 框架是一个「面向源码阅读者」的框架。如果对你有帮助,请不要吝惜你的 star。

也就是说,我制作这个框架的目的就是让前端新人学习轮子的制作思路。所有代码都追求可读性。

  1. 你可以通过查看逐个 commit 来学习本框架的制作思路
  2. 也可以通过我录制的视频来学习 (抱歉,由于制作非常耗时,所以视频是收费的。不过项目搭建过程的录屏是免费的,这几节视频能帮你快速从零开始本项目。)

如果你对代码有疑问,欢迎提issue,我会回答你的疑问。

本 UI 框架是基于 Vue 2 实现的。

注意:本 UI 框架的代码尚未完全完工(目前代码大概完成 50%),请不要在生产环境中使用本 UI 框架。

你能学到什么

  1. 单元测试、覆盖率、持续集成等工程概念
  2. 重构、TDD/BDD、设计模式、单向数据流等技术概念
  3. Vue 的几乎所有功能,并且是深入理解这些功能,而不是肤浅理解

有哪些轮子

  • 简单轮子:按钮、输入框、网格、布局、Toast、Tabs、Popover、手风琴(代码已完成)
  • 进阶轮子:级联选择、无缝轮播、响应式导航条、分页、表单验证、Table、图片上传、Sticky、Tree、Suggestion、Datepicker(代码未完成)
  • 其他:路由、状态管理(代码未完成)

注意:这只是目前的计划,具体要完成的轮子可能与上面有出入。

项目特点

  1. 使用 Travis CI 进行持续集成
  2. 有丰富的单元测试,项目完成时,期望测试覆盖率超过 90%
  3. 自说明的代码,即使没有注释,你也能看懂
  4. 初期我使用 parcel 构建方便新人上手,后期改为 Vue Cli 3 以实现更多功能

背景

我几年前曾经发表过《笨办法学前端》一文, 当时我觉得开源社区里虽然有很多不错的库,但是这些库都是以实用为主,其源码并不适合新人阅读。

于是我业余时间用原生 JS 造了几个轮子放在 GitHub,没想到居然有几百人关注,还希望我能发布更详细的教程。

但是我当时并没有时间来做更详细的教程。

现在我终于……还是很忙,不过我决定用每周六和周日来录制「造轮子」的视频。

这一次为了顺应前端的潮流,我直接采用 Vue 2 来造轮子。如果你正在学习 Vue 2,那么轱辘 UI 的源码会非常适合你阅读。

视觉稿

本 UI 框架借鉴了一些成熟 UI 框架(如 Framework7、Element UI 和 Ant Design)的外观,简化之后我自己制作了一个视觉稿

如果你发现视觉稿有什么不足的地方,可以直接在上面留言,我也会看到。

为什么叫轱辘UI

因为轱辘就是「轮子」的意思。

源码学习

  1. 安装依赖

    yarn install
    
  2. 启动 dev server

    yarn serve
    

微信交流群

点击查看二维码