基于 Vue3 的企业级中台后台 UI 组件库

介绍

DWin UI 是一套基于 Vue3 开发的轻量化、标准化企业中台后台通用组件库。 全面采用 <script setup> 语法开发，专注服务 企业中台、B端后台管理系统 等场景。

全局统一 d- 组件前缀，内置完整样式变量体系，组件开箱即用、低侵入、高可扩展，非常适合中后台项目快速开发与二次封装。

简洁易用，功能强大，快速上手

特性

• ✨ Vue3 原生开发：全量 script setup 语法，体积轻量、性能极致
• 🧩 中台场景专属：针对中后台高频业务深度优化，适配性极强
• 🎨 全局统一规范：固定 d- 组件前缀，样式、类名、交互统一
• 🛠 可全局配置：支持自定义组件前缀、主题色、全局样式变量
• 📦 双引入模式：支持全量引入 / 按需引入
• 🔧 极易二次开发：结构清晰、封装克制、无冗余逻辑

环境支持

• 适配 Vue 3.x 所有版本
• 支持 Vite / Vue-CLI 工程
• 主流现代浏览器
• 支持 SSR、Electron

安装

pnpm add dwin-ui
# npm
npm install dwin-ui --save
# yarn
yarn add dwin-ui

使用

import { createApp } from 'vue'
import DWinUI from 'dwin-ui'
import 'dwin-ui/style/base.css'

const app = createApp(App)
app.use(DWinUI)
app.mount('#app')