Vue DevUI is a Vue3 open source component library based on DevUI design system. It uses the latest Vue3+TypeScript+Vite+JSX technology stack for development and construction. It uses Jest to write unit tests and VitePress to build official website documents. It also supports on-demand loading and theme customization.

On May 1st, we officially launched the Vue DevUI open source project in the community and recruited contributors.

Let’s build the Vue DevUI project together! 🥳

On August 3rd, we got our first update on Vue DevUI in Nuggets.

Vue DevUI already has 10 component members ~ 🥳😋

Many thanks to the early contributors to Vue DevUI:

• Zcating
• flxy1028
• to0simple
• brenner8023

Thanks to the hard work of the early participants, the Vue DevUI project attracted more and more participants. Within 10 days, all 61 components were claimed, and 11 additional components were added.

We synchronized this very exciting development on August 14th.

Vue DevUI has 11 new members ~ 🥳😋

From August until now, Vue DevUI has maintained a very high level of activity, repeatedly listed in Gitee’s Open Source software homepage hot of the Day and Hot of the week, and the code activity is more than 98% of the projects.

As of October 1, Vue DevUI had 37 new contributors, 123 PR, and 604 new submissions.

Welcome to join us to build a user-friendly, easy-to-use, powerful Vue3 open source component library, interested partners can add DevUI small assistant wechat: Devui-Official, pull you into our core development group.

Welcome to the live broadcast by Kagol and the village head from the DevUI team to learn how to build a Vue3 component library.

Village head broadcast room

Record the address of the past broadcast

Vue DevUI Open Source Guide 02: Make a decent Tree component

Vue DevUI Open Source Guide 01: Submit my first PR

In addition, Kagol will broadcast live with the village chief at 9:00 PM tonight, and continue to share the design and implementation of the component, how to write unit tests for the component, and implement the function of expanding/unwinding the tree component. Welcome to watch ~

Here are the latest developments in Vue DevUI.

Components (36)

The latest version of Vue DevUI is v1.0.0-alpha.1

It contains 36 components in 6 categories and supports on-demand loading and theme customization of components.

General (9)

1. Button Button assembly – Zcating
2. ClickOutside Click on external elements – kd554246839
3. Icon Icon – Kagol
4. Overlay Mask layer – zcating
5. Panel Panel component – To0Simple
6. Ripple Water ripples – ErKeLost
7. Search Search box – Laiweilun
8. Status Status – LiuSuY
9. Sticky then – maizhiyuan

Navigation (3)

1. Anchor Anchor – Asian-TMAC
2. Pagination – 50-50
3. Tabs TAB component – FLxy1028

Feedback (3)

1. Alert Alert – to0simple
2. Loading Loading prompt – 50/50
3. Toast global notification – IEL

Data entry (12)

1. EditableSelect can be entered in the drop-down box – chengxi_24
2. InputNumber Number input box – yqsheng
3. Upload – ~zZ.Lucky
4. Slider – httpxiaobocom
5. Transfer shuttle frame – GuaimeengMengxiaoxiong
6. DatePicker DatePicker – mrundef
7. Select drop-down selection box – lookForWhat
8. CheckBox CheckBox – brenner8023
9. Radio check box – Brenner8023
10. Switch Switch – Brenner8023
11. TagInput – Brenner8023
12. TextInput text box – Brenner8023

Data Presentation (8)

1. Badge – Duqingyu Badge
2. QuadrantDiagram QuadrantDiagram – nowisfuture
3. ImagePreview ImagePreview – sise209
4. Card Card – Vergil
5. Carousel – onlyoupon
6. Progress bar – Lao — Hu
7. Rate Score – ~ zz.lucky
8. Avatar Avatar – to0simple

Layout (1)

1. Splitter – Jecyu

engineering

1. Theme customization – Kagol
2. useVitePressBuild the official website -kagol
3. demoFile code retract function -laiweilun
4. Add automatic generationsidebar.tsComponent navigation file script -iel
5. On-demand packaging of components – Kagol
6. useASTTo optimize theDevUI CLIFile parsing mode -half-and-half
7. increaseDevUI CLIUsed to create components and component library export files -iel
8. JestUnit Tests -brenner8023
9. eslintCode specification constraint -brenner8023
10. stylelintStyle specification constraints -brenner8023
11. lslintRestrictions on folder/file naming conventions -brenner8023
12. commitlintCode submission specification constraint -kagol

After more than a month of development, in addition to the total number of components exceeded 36 (the number of components accounted for 55%, the total number of components is 66), Vue DevUI component library also ushered in the first ultra complex component DatePicker breakthrough, DatePicker has been completed:

• dateMode date panel display and basic interaction
• rangeThe date range selector is the basic function of the pattern

Thanks to Marvin of the DatePicker component for his hard work, Marvin became the contributor with the largest total number of submissions 🎉🎉.

Marvin is the leader of Suning Tesco. He is very active in the community and likes to share technology. His gold digging account is JS old Dog.

He also recently shared two practical articles about his participation in the Vue DevUI project. Please give him a thumbs up and support 👍 ~

TSX functional component practices for VUE in DevUI

Again, the TSX functional components of Vue

DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker DatePicker

Participating in open source projects is not only a great addition to our resume, but also an improvement of ourselves:

• Let’s learn to work together with others to accomplish one thing
• Learn from the best practices and experiences of others by reviewing their code
• Cultivate the consciousness of continuous iteration and optimization, and cultivate the spirit of pursuing high-quality goods
• A new understanding of who we are is something that can never be broken out of isolation, and being open source allows us to learn a new understanding of who we are through collaboration with others

Thanks to all participating in the Vue DevUI component library construction partners!

Here is the list of contributors (in no particular order) :

• asian-TMac
• brenner8023
• chengxi_24
• half-and-half
• duqingyu
• ErKeLost
• flxy1028
• guaimeengmengxiaoxiong
• httpxiaobocom
• iel
• Jecyu
• kagol
• laiweilun
• lao–hu
• LiuSuY
• lookforwhat
• maizhiyuan
• mrundef
• nowisfuture
• onlyoupon
• sise209
• to0simple
• Vergil
• yqsheng
• zcating
• ~zZ.Lucky

trailer

At 9:00 tonight, Kagol will be a guest in the live broadcast room of the village head’s station B, sharing his experience in component design and development. This live broadcast has two main themes:

• How do I write unit tests for components
• Continue the last live broadcast, improve the tree component, add node expansion/collapse function

The following is the previous recording address:

• Vue DevUI Open Source Guide 01: Submit my first PR
• Vue DevUI Open Source Guide 02: Make a decent Tree component