Vue 3 · 零构建 ESM · MIT

企业级中后台
Vue 3 组件库

100 个组件覆盖表单、表格、审批、组织与日程，内置明暗主题、中英文文案、按钮权限与移动端适配。

$npm i djm-ui

查看文档打开示例应用

100个组件

143个页面无障碍零违规

2套主题令牌

320–1440全宽度适配

组件之外的细节

主题、文案、权限、适配都在库里处理好，接入时只需要写业务。

100 个组件

基础、导航、表单、数据展示、反馈与业务组件，命名和交互保持一致。

明暗主题与品牌色

两套令牌开箱可用，换一个主色会自动推导整套色阶。

中英文文案

文案集中在语言包里，切换语言不用改业务代码。

按钮级权限

v-permission 控制显隐或禁用，界面判断之外仍以服务端校验为准。

移动端适配

320 到 1440 逐档校验，栅格、表单、表格与浮层都有窄屏方案。

可访问性

全站页面跑 axe 扫描，键盘顺序、焦点轮廓与读屏标签都已补齐。

同一套页面，两种主题

主题切换只换令牌，不需要维护两份组件样式。

组件覆盖范围

完整的属性、事件与示例见组件文档。

基础与导航

ButtonIconTag BadgeAvatarDivider BreadcrumbMenuPageHeader SegmentedStepsStatus

表单

InputSelectDatePicker DateTimePickerCascaderTreeSelect UploadSchemaFormFieldList QueryFilterImportWizard

数据展示

TableEditableTableTreeTable VirtualListPaginationTabs DescriptionsTreeDiff Statistic

业务场景

ApprovalFlowOrgPickerOrgChart KanbanGanttSchedule ChatCommentNotification SignaturePrint

接入方式

组件库没有构建步骤，npm 安装后直接注册，或按需引入单个组件。

import { createApp } from 'vue'
import DjmUI from 'djm-ui'
import 'djm-ui/styles'
import App from './App.js'

createApp(App)
  .use(DjmUI, { locale: 'zh-CN' })
  .mount('#app')

import { DjmButton, DjmTable } from 'djm-ui'
import 'djm-ui/styles'

// 只要个别组件样式时按依赖顺序引入
import 'djm-ui/styles/tokens.css'
import 'djm-ui/styles/base.css'
import 'djm-ui/styles/components/button.css'

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/djm-ui@0.67.0/dist/djm-ui.min.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/djm-ui@0.67.0/dist/djm-ui.umd.min.js"></script>

<script>
  Vue.createApp({
    template: '<DjmButton variant="primary">按钮</DjmButton>'
  }).use(DjmUI).mount('#app')
</script>

安装后即可使用全部组件

Vue 3.4+ 项目直接接入，主题、文案与权限按需配置。

npm i djm-ui 查看快速开始打开示例应用

企业级中后台Vue 3 组件库