Treads the UI

The official documentation

GitHub

Wheel UI is a different UI framework.

This UI framework is a “source reader oriented” framework. If it helps you, please don’t begrudge your star.

That is to say, the purpose of my frame is to let newcomers learn how to make wheels. All code strives for readability.

  1. You can learn how to make this framework by looking at each commit
  2. I can also learn from videos THAT I have recorded (sorry, videos are paid for because they take a lot of time to make. However, screenshots of the building process are free, and these videos will help you quickly start the project from scratch.)

If you want to start with the first COMMIT, click here.

If you have any questions about the code, feel free to issue them and I will answer them. Group consulting can also be added at the end of this article.

This UI framework is based on Vue 2 implementation.

Note: The code for this UI framework is not yet complete (approximately 50% of the code is currently complete), so please do not use this UI framework in production.

What can you learn

  1. Unit testing, coverage, continuous integration, and other engineering concepts
  2. Refactoring, TDD/BDD, design patterns, one-way data flow and other technical concepts
  3. Almost all of Vue’s features are understood in depth, not in a superficial way

What wheels are there

  • Simple wheels: buttons, input boxes, grids, layouts, Toast, Tabs, Popover, accordion (code done)
  • Advanced wheels: cascading selection, seamless rotation, responsive navigation bar, paging, form validation, Table, image upload, Sticky, Tree, Suggestion, Datepicker (code unfinished)
  • Others: Routing, state management (code unfinished)

Note: this is only the current plan, the exact wheels to be completed may differ from the above.

Project characteristics

  1. Use Travis CI for continuous integration
  2. There are plenty of unit tests, and by the time the project is complete, expect more than 90% test coverage
  3. Self-explanatory code that you can read even without comments
  4. I started with a Parcel build to make it easier for newcomers, and later moved to Vue Cli 3 for more functionality

background

A few years ago, I wrote a post titled “Learning the Front End in a Stupid Way.” I thought there were a lot of good libraries in the open source community, but they were mostly utilitarian and the source code was not suitable for newcomers.

So IN my spare time, I built a few wheels using native JS and put them on GitHub. To my surprise, hundreds of people followed me and asked me to publish a more detailed tutorial.

But I didn’t have time to do a more detailed tutorial.

And now I finally… I’m still busy, but I’ve decided to use every Saturday and Sunday to record the Making the Wheel video.

This time I went straight to Vue 2 for the wheels to go with the trend at the front end. If you are learning Vue 2, then the source of Wheel UI will be perfect for you to read.

Visual draft

The UI framework borrowed the look and feel of mature UI frameworks such as Framework7, Element UI, and Ant Design. After simplifying, I made a visual draft myself.

If you find a flaw in your visual draft, just leave a comment on it and I’ll see it.

Why is it called Wheels UI

For wheel means “wheel”.

Source learning wechat communication group

Group 1, group 2 full, group 3 linked