Three months ago, we posted an article in the Nuggets that officially launched the Vue DevUI project. Let’s build Vue DevUI together! 🥳

Soon many people who love open source joined us, so we quickly formed a Vue DevUI core members group, and discussed the technology stack of Vue DevUI component library together:

  • Vite
  • Vue3
  • JSX

So far the team has grown to 46 members, the Vue DevUI component library has added 10 new component members, and version V0.1.0 has been released at NPM:

[email protected]

⚠️ Note: This version is not yet complete and is not available for production.

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

  • brenner8023
  • flxy1028
  • kagol
  • to0simple
  • Zcating

Next, I would like to report the current progress of Vue DevUI. Welcome interested partners to participate in the construction of 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
  • Get involved in the open source community
  • Get to know a group of friends who love learning and open source

The new component

Common components:

  1. Button assembly
  2. Panel Panel

Navigation components:

  1. Tabs TAB components

Feedback components:

  1. Alert Component

Data entry components:

  1. CheckBox CheckBox component
  2. Radio Radio Radio box component
  3. Switch module
  4. TagsInput Tag input component
  5. TextInput A component of a text box

Data presentation components:

  1. Avatar Avatar component

Here’s a look at the site:

Detailed Release Notes information can be found at:

Gitee.com/devui/vue-d…

Optimization and specification

The following specifications have been added to the Vue DevUI Component Library project:

  1. Jest unit tests
  2. ESLint code specification
  3. StyleLint Style specification
  4. Ls-lint Folder/file naming convention
  5. CommitLint Code commits the specification

Quick start

Start the Trilogy Fast:

  • The installation
  • The introduction of
  • use

Install the vue – devui

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

The introduction of vue – devui

main.ts

Import {createApp} from 'vue' import App from './ app. vue' import DevUI from 'vue-devui' import Use (devui).mount('# App ') // Use (devui).mount('# App ')Copy the code

Using the Button component

App.vue

- the button < d > sure < / d - button >Copy the code

Effect:

Here is the source code for the project:

Gitee.com/devui/vue-d…

Participate in the contribution can be added to the small assistant wechat: Devui-official, pull you into the Vue Devui core members group ~ 😋😋

Welcome to our DevUI component library and light up our little star 🌟 :

Github.com/devcloudfe/…

Also welcome to use DevUI newly released DevUI Admin system, out of the box, 10 minutes to build a beautiful atmosphere of the background management system!

trailer

DevUI 12 will be released on The 10th of this month, and there are so many interesting new features in addition to updating Angular 12. Look forward to it!

DevUI Admin 2.0 will also be released on The 17th of this month, providing a magical piece of dark technology, let’s wait and see!