Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frankfang/frank-test-1
官网：
https://github.com/frankfang/frank-test-1
vue
Last synced: 17 days ago
JSON representation
官网：
- Host: GitHub
- URL: https://github.com/frankfang/frank-test-1
- Owner: FrankFang
- License: mit
- Created: 2018-06-23T13:37:44.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T17:04:44.000Z (almost 2 years ago)
- Last Synced: 2024-10-13T14:32:20.404Z (about 1 month ago)
- Topics: vue
- Language: HTML
- Homepage: https://frankfang.github.io/frank-test-1/
- Size: 3.83 MB
- Stars: 89
- Watchers: 5
- Forks: 76
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 轱辘 UI
[官方文档](https://frankfang.github.io/gulu/)
轱辘 UI 是一个不太一样的 UI 框架。
本 UI 框架是一个「面向源码阅读者」的框架。如果对你有帮助，请不要吝惜你的 star。
也就是说，我制作这个框架的目的就是让前端新人学习轮子的制作思路。所有代码都追求可读性。
1. 你可以通过查看逐个 commit 来学习本框架的制作思路
2. 也可以通过我[录制的视频](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 框架。
## 你能学到什么
1. 单元测试、覆盖率、持续集成等工程概念
2. 重构、TDD/BDD、设计模式、单向数据流等技术概念
2. Vue 的几乎所有功能，并且是深入理解这些功能，而不是肤浅理解
## 有哪些轮子
* 简单轮子：按钮、输入框、网格、布局、Toast、Tabs、Popover、手风琴（代码已完成）
* 进阶轮子：级联选择、无缝轮播、响应式导航条、分页、表单验证、Table、图片上传、Sticky、Tree、Suggestion、Datepicker（代码未完成）
* 其他：路由、状态管理（代码未完成）
注意：这只是目前的计划，具体要完成的轮子可能与上面有出入。
## 项目特点
1. 使用 Travis CI 进行持续集成
2. 有丰富的单元测试，项目完成时，期望测试覆盖率超过 90%
3. 自说明的代码，即使没有注释，你也能看懂
4. 初期我使用 parcel 构建方便新人上手，后期改为 Vue Cli 3 以实现更多功能
## 背景
我几年前曾经发表过《[笨办法学前端](https://juejin.im/post/58ef6004ac502e006c16f2d6)》一文，
当时我觉得开源社区里虽然有很多不错的库，但是这些库都是以实用为主，其源码并不适合**新人**阅读。
于是我业余时间用原生 JS 造了几个轮子放在 GitHub，没想到居然有几百人关注，还希望我能发布更详细的教程。
但是我当时并没有时间来做更详细的教程。
现在我终于……还是很忙，不过我决定用每周六和周日来录制「造轮子」的视频。
这一次为了顺应前端的潮流，我直接采用 Vue 2 来造轮子。如果你正在学习 Vue 2，那么轱辘 UI 的源码会非常适合你阅读。
## 视觉稿
本 UI 框架借鉴了一些成熟 UI 框架（如 Framework7、Element UI 和 Ant Design）的外观，简化之后我自己制作了一个[视觉稿](https://www.yuque.com/u29422/gulu/artboards/22283)。
如果你发现视觉稿有什么不足的地方，可以直接在上面留言，我也会看到。
## 为什么叫轱辘UI
因为轱辘就是「轮子」的意思。
## 源码学习
1. 安装依赖
```
yarn install
```
2. 启动 dev server
```
yarn serve
```
## 微信交流群
[点击查看二维码](http://qr.jirengu.com/api/taskUrl?tid=8)