Giter VIP home page Giter VIP logo

gulu's Introduction

轱辘 UI

官方文档

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

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

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

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

如果你想从第一个commit 开始看,请点击这里

如果你对代码有疑问,欢迎提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
    

微信交流群

点击查看二维码

gulu's People

Contributors

frankfang avatar sabertazimi avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.