陌讯skills聚合平台

dedsi-vue-ui

📁 dedsiteam/dedsi-skills 📅 Jan 24, 2026
11
总安装量
7
周安装量
#28152
全站排名
安装命令
npx skills add https://github.com/dedsiteam/dedsi-skills --skill dedsi-vue-ui

Agent 安装分布

claude-code 5
gemini-cli 4
windsurf 4
antigravity 4
opencode 4
codex 4

Skill 文档

Dedsi-Vue-UI 组件库 SKILL 文档

帮助 AI 理解和使用 Dedsi-Vue-UI 组件库的详细指南。

何时使用

  • 使用 Dedsi Vue UI 组件库开发 Vue 3 + TypeScript 项目
  • 需要查询组件的 Props、Events、Slots 和使用方法
  • 解决组件使用中的常见问题
  • 遵循 Dedsi UI 组件的开发和使用规范

能力规则

没有这些规则，AI 无法解决问题或生成的代码无法正确运行。

核心规范

规则 影响 描述
component-naming.md HIGH 组件命名规范和使用格式
component-table.md HIGH 表格组件的完整使用指南
component-menu.md HIGH 导航菜单的使用方法

基础组件

规则 影响 描述
component-alert.md MEDIUM 警告提示组件
component-avatar.md MEDIUM 头像组件
component-badge.md MEDIUM 徽标数组件
component-breadcrumb.md MEDIUM 面包屑导航
component-card.md MEDIUM 卡片容器
component-divider.md MEDIUM 分割线
component-empty.md MEDIUM 空状态占位
component-tag.md MEDIUM 标签组件
component-space.md MEDIUM 间距布局
component-split.md MEDIUM 分割布局
component-typography.md MEDIUM 排版组件

布局组件

规则 影响 描述
component-grid.md MEDIUM 栅格布局系统
component-scrollbar.md MEDIUM 自定义滚动条
component-skeleton.md MEDIUM 骨架屏

导航组件

规则 影响 描述
component-menu.md HIGH 导航菜单
component-tabs.md MEDIUM 标签页切换
component-dropdown.md MEDIUM 下拉菜单

数据展示组件

规则 影响 描述
component-table.md HIGH 数据表格
component-statistic.md MEDIUM 统计数值
component-number-converter.md MEDIUM 数字转换
component-countdown.md MEDIUM 倒计时
component-image.md MEDIUM 图片预览
component-qrcode.md MEDIUM 二维码生成

反馈组件

规则 影响 描述
component-dialog.md HIGH 对话框
component-modal.md MEDIUM 模态框
component-drawer.md MEDIUM 抽屉
component-message.md HIGH 全局提示
component-popconfirm.md MEDIUM 气泡确认框
component-popover.md MEDIUM 气泡卡片
component-tooltip.md MEDIUM 文字提示
component-result.md MEDIUM 结果反馈
component-popper.md MEDIUM 基础气泡

其他组件

规则 影响 描述
component-segmented.md MEDIUM 分段器
component-marquee.md MEDIUM 跑马灯

效率规则

这些规则帮助 AI 更有效、更一致地解决问题。

最佳实践

规则 影响 描述
best-practices.md HIGH 组件使用最佳实践

安装使用

npm install dedsi-vue-ui

import { createApp } from 'vue'
import { DedsiAlert, DedsiButton, DedsiTable } from 'dedsi-vue-ui'

const app = createApp(App)
app.use(DedsiAlert)
app.use(DedsiButton)
app.use(DedsiTable)

组件统计

已实现组件 (37个)

基础组件 (10个):

  • DedsiAlert, DedsiAvatar, DedsiBadge, DedsiBreadcrumb, DedsiCard
  • DedsiDivider, DedsiEmpty, DedsiTag, DedsiSpace, DedsiSplit

布局组件 (3个):

  • DedsiRow/DedsiCol, DedsiScrollbar, DedsiSkeleton

导航组件 (3个):

  • DedsiMenu, DedsiTabs, DedsiDropdown

数据展示组件 (7个):

  • DedsiTable, DedsiStatistic, DedsiNumberConverter, DedsiCountdown
  • DedsiImage, DedsiQRCode, DedsiTypography

反馈组件 (9个):

  • DedsiDialog, DedsiModal, DedsiDrawer, DedsiMessage
  • DedsiPopconfirm, DedsiPopover, DedsiTooltip, DedsiResult, DedsiPopper

其他组件 (5个):

  • DedsiSegmented, DedsiMarquee, DedsiCountdown, DedsiEmpty, DedsiResult

未实现组件 (23个)

表单组件:

  • DedsiButton, DedsiForm/DedsiFormItem, DedsiInput/DedsiInputNumber/DedsiInputPassword
  • DedsiTextarea, DedsiCheckbox/DedsiCheckboxGroup, DedsiRadio/DedsiRadioGroup
  • DedsiSelect, DedsiSwitch, DedsiSlider, DedsiRate

数据选择组件:

  • DedsiAutoComplete, DedsiCascader, DedsiDatePicker/DedsiMonthPicker/DedsiRangePicker
  • DedsiTimePicker/DedsiTimeRangePicker, DedsiTreeSelect, DedsiTransfer, DedsiMentions

其他:

  • DedsiUpload

核心特性

  • Vue 3 Composition API: 充分利用 Vue 3 的新特性
  • TypeScript 支持: 完整的类型定义和类型推断
  • 组件化设计: 高复用性和可组合性
  • 响应式布局: 支持多种屏幕尺寸
  • 主题定制: 支持自定义主题和样式

组件命名规则

  • 单文件组件: Dedsi + 功能名称（如 DedsiAlert、DedsiButton）
  • 组合组件: 主组件 + 子组件（如 DedsiMenu + DedsiMenuItem）

重要: 在模板中使用组件时，必须使用 kebab-case 格式的 name 值（如 dedsi-alert），而不是 PascalCase（如 DedsiAlert）。

统计信息

指标 数值
总组件数 60
已实现 37
未实现 23
组件类别 6

技术栈

  • 框架: Vue 3.5.26 (Composition API)
  • 语言: TypeScript 5.9.3
  • 构建工具: Vite
  • 图标: @ant-design/icons-vue
  • 日期处理: dayjs

参考

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。