Vue DevUI already has 10 component members~🥳😋

Three months ago, we posted an article in the community and officially launched the Vue DevUI project. Let's build the Vue DevUI project together! 🥳

Soon many small partners who love open source participated, so we quickly established a Vue DevUI core member group to discuss the technology stack of the Vue DevUI component library:

• Vite
• Vue3
• TypeScript
• JSX

So far, the team has grown to 46 members. The Vue DevUI component library has also added 10 new component members, and the v0.1.0 version has been released on npm:

vue-devui@0.1.0

⚠️Note: This version is not yet complete and cannot be used in a production environment.

Special thanks to the contributions of the following friends 🎉🥳:

• brenner8023
• flxy1028
• kagol
• to0simple
• Zcating

Next, synchronize the current progress of Vue DevUI. Interested partners are welcome to participate in the construction of the Vue DevUI project! 👏🎉

By participating in the Vue DevUI project, you can:

• Learn the latest Vite+Vue3+TSX technology
• Learn how to design and develop components
• Participate in the open source community
• Meet a group of friends who love learning and open source

New components

Common components:

1. Button button component
2. Panel components

Navigation components:

3. Tabs tab component

Feedback component:

4. Alert warning component

Data entry components:

5. CheckBox check box component
6. Radio radio component
7. Switch switch components
8. TagsInput tag input component
9. TextInput text box component

Data display components:

10. Avatar component

The following is the rendering of the website:

For detailed Release Notes information, please refer to:

https://gitee.com/devui/vue-devui/releases/v0.2.0

Optimization and specification

At present, the following specifications have been added to the Vue DevUI component library project:

1. Jest unit testing
2. ESLint code specification
3. StyleLint style specification
4. ls-lint folder/file naming convention
5. CommitLint code submission specification

Quick start

Quickly start the trilogy:

• Install
• Introduce
• use

Install vue-devui

npm i vue-devui
# npm i vue-devui --registry=https://registry.npm.taobao.org/

Introduce vue-devui

main.ts

import { createApp } from 'vue'
import App from './App.vue'

// 引入 Vue DevUI 组件库
import DevUI from 'vue-devui'
import 'vue-devui/style.css'

// 使用vue-devui
createApp(App).use(DevUI).mount('#app')

Use the Button component

App.vue

<d-button>确定</d-button>

Effect picture:

The following is the source code of the project:

https://gitee.com/devui/vue-devui

To participate in the contribution, you can add a small assistant WeChat: devui-official, pull you into the Vue DevUI core member group~😋😋

Welcome to follow us DevUI component library, light up our little star🌟:

https://github.com/devcloudfe/ng-devui

Also welcome to use DevUI’s newly released DevUI Admin system, out of the box, build a beautiful and atmospheric background management system in 10 minutes!

Notice

DevUI will release the DevUI 12 version on the 10th of this month. In addition to upgrading Angular 12, there are many more interesting new features, so look forward to it!

DevUI Admin version 2.0 will also be released on the 17th of this month, providing a magical black technology, let us wait and see!