• Stars
    star
    646
  • Rank 69,672 (Top 2 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

轱辘,面向源码阅读者的 UI 框架

轱辘 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
    

微信交流群

点击查看二维码

More Repositories

1

best-chinese-front-end-blogs

收集优质的中文前端博客
3,863
star
2

wheels

笨办法造轮子
JavaScript
1,036
star
3

fack

Fack: A prolonged way of saying "f*ck" when you are busted in an awkward/uncomfortable situation.
JavaScript
106
star
4

synk

JavaScript
105
star
5

oh-my-docker

Shell
78
star
6

gulp-html-extend

Extend your html files
JavaScript
66
star
7

githublog

A blog
64
star
8

nodejs-test

JavaScript
59
star
9

gulu-for-vue3

一个面向学习者的 UI 框架
Vue
51
star
10

oh-my-env-1

Dockerfile
42
star
11

make-a-pikachu

预览链接:
JavaScript
38
star
12

fIHOZKRf4eu9

33
star
13

dot-files

Shell
24
star
14

wtf-blog

这也能算一个博客系统?
CSS
23
star
15

wtf-slides

这也能算一个 PPT 系统?!
CSS
17
star
16

frankfang.com

frankfang.com
CSS
14
star
17

cv-2020

预览地址:
HTML
14
star
18

gulu-design-resources

预览
13
star
19

micro-frontend-starter

TypeScript
12
star
20

163-music-2018

仿网易云音乐,包含管理端(admin 页面)
JavaScript
10
star
21

canvas-demo-2017

手机画板
JavaScript
10
star
22

GEIUHH6wQRwj

Vue
8
star
23

PRoSroG

TypeScript
8
star
24

calendar

A calendar
JavaScript
8
star
25

animating-resume

预览地址:
JavaScript
7
star
26

nav-demo

预览:
HTML
6
star
27

nav-1

点击预览:
CSS
6
star
28

synk-demo-6

JavaScript
5
star
29

chrome-app-rssly

yet another rss reader
JavaScript
5
star
30

Get-D2-2015-Ticket

Get D2 2015 Ticket - Designer & Developer Frontend Technology Forum
5
star
31

NetEaseMusic

用 vw (或 REM)做的界面
HTML
5
star
32

bvM2PY

TypeScript
5
star
33

data-structure-1

JavaScript
5
star
34

sign-in-demo

JavaScript
4
star
35

cv-1

会动的代码,点击预览 →
JavaScript
4
star
36

mvc-demo-1

JavaScript
4
star
37

WAxM06FAtLXQ

Vue
4
star
38

qjVPO7f89org

Vue
4
star
39

gobook

TypeScript
4
star
40

ajax-1

JavaScript
4
star
41

ts-react-demo-2

HTML
4
star
42

mvc-demo-2

JavaScript
4
star
43

iYLyTNaZmLRi

Vue
4
star
44

kuayu-1

JavaScript
4
star
45

oh-my-docker-m1

Shell
3
star
46

vue-roadmap

预览:
HTML
3
star
47

vim

VIM config on Windows
Vim Script
3
star
48

WgGRGvfAVyp5

TypeScript
3
star
49

ts-vue-demo-1

Vue
3
star
50

slides-demo-2

预览:
JavaScript
3
star
51

wtf-weekly

JavaScript
3
star
52

LWxzO1srBMPJ

JavaScript
3
star
53

static-server-2

JavaScript
3
star
54

morney-test-vue-echarts

Vue
3
star
55

3iw2WJa

TypeScript
3
star
56

morney-react-1

JavaScript
2
star
57

8pPES5Jg7mjh

2
star
58

blog

HTML
2
star
59

mangosteen-fe-3

TypeScript
2
star
60

UU85n20nnISV

TypeScript
2
star
61

5wYFQeLGpka4

Vue
2
star
62

XLn4Pf

TypeScript
2
star
63

promise-2

TypeScript
2
star
64

hJS1Ra

TypeScript
2
star
65

dom-demo-1

JavaScript
2
star
66

node-todo-2

JavaScript
2
star
67

frank-test-5

JavaScript
2
star
68

morney-react-tags

JavaScript
2
star
69

resume-15-5

预览
HTML
2
star
70

2018-react-demo-1

预览地址:
JavaScript
2
star
71

TGePcO

TypeScript
2
star
72

westore-react-1

点击预览:
JavaScript
2
star
73

l3xHutO

TypeScript
2
star
74

redux-demos

JavaScript
2
star
75

pikachu-2

JavaScript
2
star
76

dom-2-prototype

HTML
2
star
77

frank-test-6

预览 ->
TypeScript
2
star
78

webpack-demo-3

JavaScript
2
star
79

promise-test

TypeScript
2
star
80

mvc-demo-zbxl

JavaScript
2
star
81

morney-live-money-1

Vue
2
star
82

deepClone

JavaScript
2
star
83

morney-live-1

Vue
2
star
84

morney-live-svg

Vue
2
star
85

j3x2

TypeScript
2
star
86

morney-rails-2

Ruby
2
star
87

nextjs-typeorm-show-posts

TypeScript
2
star
88

2018-react-demo-2

JavaScript
2
star
89

to2vk9

TypeScript
2
star
90

web-perf-node-demo-1

JavaScript
2
star
91

mvc-demo-nY5i

JavaScript
2
star
92

HFHznhsghqne

Vue
2
star
93

mvc-demo-Q7os

JavaScript
2
star
94

MQhjd1d

Ruby
2
star
95

bind

JavaScript
2
star
96

source-eventhub

视频讲解链接
TypeScript
2
star
97

ts-react-demo-3

HTML
1
star
98

ke

HTML
1
star
99

morney-react-42

JavaScript
1
star
100

morney-react-tag

JavaScript
1
star