# Kwc Shoelace Vue

> 仅适用于非 KWC 工程的通用 Vue 项目。KWC 工程需求必须交由 kwc-project-scaffold。

- Skill: `kingdee/kwc-shoelace-vue` (Agent Skill, multi-file: 73 files)
- Install (CLI): `npx skillmds@latest add kingdee/kwc-shoelace-vue`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kingdee/kwc-shoelace-vue/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kingdee (https://skillmd.com/u/kingdee)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kingdee/kwc-shoelace-vue

---


# Vue 组件开发专家

本 Skill 面向通用 Vue 3 项目，专门处理 `@kdcloudjs/shoelace` 标准组件和 KWC 扩展组件的接入、开发与修改。

## 1. 适用范围
- 当前项目是 Vue 3 Web 项目
- 需要使用 `@kdcloudjs/shoelace` 组件
- 不依赖 KWC 工程目录、页面元数据或 KWC 脚手架
- 若检测到项目已经是 KWC Vue 工程，应切换到 `kwc-vue-development`

## 2. 标准工作流
1. 先确认当前需求是否只是“在现有 Vue 工程中使用组件”，而不是创建 KWC 工程。
2. 开发前阅读本 Skill 目录下的 `rule.md`，严格遵守导入、事件和属性传递约束。
3. 遇到 Table、DatePicker、Pagination、Nav、XMarkdown、Think 等扩展组件时，先阅读对应 `reference/` 文档。
4. 代码交付时遵循当前 Vue 工程自己的入口、构建和测试方式，不引入任何 `kd` 脚手架命令。

## 3. 关键约束摘要
- 组件导入必须使用 `@kdcloudjs/shoelace/dist/components/[component]/[component].js`
- 组件标签必须使用 kebab-case
- Shoelace 事件必须使用 `@sl-*`
- 数组和对象属性必须使用 camelCase + `.prop`
- 样式必须优先使用 Shoelace Design Token

## 4. 常用资源
- Table: `reference/table/index.md`
- DatePicker: `reference/datepicker/index.md`
- TimePicker: `reference/sl-timepicker.md`
- Pagination: `reference/sl-pagination.md`
- Daterangepicker: `reference/sl-daterangepicker.md`
- ThoughtChain: `reference/sl-thought-chain.md`
- Nav: `reference/sl-nav.md`
- XMarkdown: `reference/sl-xmarkdown.md`
- Think: `reference/sl-think.md`
- TreeSelect: `reference/sl-tree-select.md`
- Cascader: `reference/sl-cascader.md`
- Steps: `reference/sl-steps.md`
- Grid: `reference/sl-grid.md`
- Notification: `reference/sl-notification.md`
- RadioGroup: `reference/sl-radio-group.md`
- Upload: `reference/upload/index.md`
- Segmented: `reference/sl-segmented.md`
- Transfer: `reference/sl-transfer.md`
- Popconfirm: `reference/sl-popconfirm.md`
- Bubble: `reference/sl-bubble.md`
- Design Token: `reference/css-design-tokens.md`

## 5. 输出检查清单
- [ ] 当前任务只处理组件接入，不依赖 KWC 工程目录或 KWC CLI 脚手架流程
- [ ] 组件已从 `dist/components/...` 导入
- [ ] 模板标签使用 kebab-case
- [ ] 事件使用 `@sl-*`
- [ ] 数组和对象属性使用 camelCase + `.prop`
- [ ] 扩展组件先读过本地文档
- [ ] 样式优先使用 Design Token