This issue recommends a Vue3 component library based on DevUI Design system — vue-devui.

vue-devui comes from another excellent open source project, ng-DevUI, which allows developers to focus exclusively on thinking about application logic without having to think about interactions and processes. After continuous practice and precipitation, DevUI refines a set of typical business scenario component library. Due to its immersion, flexibility and simplicity, it is well received by many developers, so vue-devui component library is officially separated from DevUI into a separate open source project, which is still in the stage of incubation and evolution.

Installation use

1 Install

yarn add vue-devui

# Optional, font icon library, part of the Demo depends on this font library 
# yarn add @devui-design/icons
# main.ts file import 
# import '@devui-design/icons/icomoon/devui-icon.css'

2 Introduce modules and styles

// Global import 
import DevUI from 'vue-devui'
import 'vue-devui/style.css'

createApp(App).use(DevUI).mount('#app')

// Bring in  as needed
// main.ts file 
import { createApp } from 'vue'
import App from './App.vue'

// Step 1: Introduce a single component 
import { Button } from 'vue-devui'
// or import Button from 'vue-devui/button'
// Step 2: Introduce component styles 
// Method 1: Manually import component styles 
import 'vue-devui/button/style.css'

This issue recommends a Vue3 component library based on DevUI Design system — vue-devui. vue-devui comes from another excellent open source project, ng-DevUI, which allows developers to focus exclusively on thinking about application logic without having to think about interactions and processes. After continuous practice and precipitation, DevUI refines a set of typical business scenario component library. Due to its immersion, flexibility and simplicity, it is well received by many developers, so vue-devui component library is officially separated from DevUI into a separate open source project, which is still in the stage of incubation and evolution.

Installation use

1 Install

yarn add vue-devui

# Optional, font icon library, part of the Demo depends on this font library 
# yarn add @devui-design/icons
# main.ts file import 
# import '@devui-design/icons/icomoon/devui-icon.css'

2 Introduce modules and styles

// Global import 
import DevUI from 'vue-devui'
import 'vue-devui/style.css'

createApp(App).use(DevUI).mount('#app')

// Bring in  as needed
// main.ts file 
import { createApp } from 'vue'
import App from './App.vue'

// Step 1: Introduce a single component 
import { Button } from 'vue-devui'
// or import Button from 'vue-devui/button'
// Step 2: Introduce component styles 
// Method 1: Manually import component styles 
import 'vue-devui/button/style.css'

// Method 2: Automatically introduce components on demand 
// vite.config.tsdocument
// import styleImport from 'vite-plugin-style-import'
//   plugins: [
//       vue(),
//       styleImport({
//         libs: [
//           {
//             libraryName: 'vue-devui',
//             esModule: true,
//             resolveStyle: (name) => `vue-devui/${name}/style`,
//           },
//         ],
//       })
//     ]

3 Use

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

Component style

• Button

• Search search box

• Status

• Pagination

• Alert

• Result

• Input input field

• InputIcon input box

• CheckBox

• Transfer shuttle

• Badge

You can read more on your own.