kwc-vue-development

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

KWC Vue 开发专家

KWC Vue Development Expert

本 Skill 是 KWC Vue 项目开发的入口与总指挥。基于 Vue 3 (Composition API +

<script setup>

) 进行开发。

This Skill is the entry point and commander-in-chief for KWC Vue project development. Development is based on Vue 3 (Composition API +

<script setup>

核心职责

Core Responsibilities

你负责指导用户进行 KWC Vue 组件的开发、修改和维护。重要：你必须严格遵守本 Skill 目录下的

rule.md

文件中定义的硬性约束。在开始任何代码编写前，请务必阅读并理解这些规则。

You are responsible for guiding users in the development, modification and maintenance of KWC Vue components. Important: You must strictly follow the hard constraints defined in the

rule.md

file in this Skill directory. Be sure to read and understand these rules before starting any code writing.

1. 环境上下文确认

1. Environment Context Confirmation

项目根目录：包含
```
.kd
```
文件夹和
```
app/kwc
```
目录。
配置环境：
```
.kd/config.json
```
中
```
framework
```
为
```
vue
```
。
重要：若当前环境不满足上述条件，必须立即停止使用本 Skill 的所有约束，转而按通用 Vue Web 项目标准协助用户。

Project Root Directory: Contains
```
.kd
```
folder and
```
app/kwc
```
directory.
Configuration Environment:
```
framework
```
in
```
.kd/config.json
```
is set to
```
vue
```
.
Important: If the current environment does not meet the above conditions, you must immediately stop using all constraints of this Skill, and instead assist users according to general Vue Web project standards.

2. Vue 3 开发基础

2. Vue 3 Development Basics

本项目基于 Vue 3，必须遵循以下基本原则：

Composition API：统一使用
```
<script setup>
```
语法，禁止使用 Options API（
```
export default { data(), methods, computed, watch }
```
）
响应式：使用
```
ref()
```
/
```
reactive()
```
声明响应式状态，禁止使用
```
this
```
。向 Web Components 传递复杂数据（对象/数组）时，由于底层需检测引用变化，绝对禁止
```
push
```
或
```
splice
```
原地修改，必须通过重新赋值（如
```
data.value = [...data.value, new]
```
）产生新引用来触发渲染。
生命周期：使用
```
onMounted()
```
/
```
onUnmounted()
```
等 Composition API 钩子

模板语法：

属性绑定：
```
:prop="value"
```
事件绑定：
```
@sl-change="handler"
```
（Shoelace 组件使用
```
@sl-*
```
前缀）

向 Web Component 传递对象/数组属性：必须用 camelCase +
.prop
修饰符：

html

【✅ 正确】 <sl-table :dataSource.prop="rows" :columns.prop="cols" :rowSelection.prop="sel"></sl-table>
【❌ 错误】 <sl-table :data-source="rows" :row-selection="sel"></sl-table>

数字类型属性使用 camelCase 不需
```
.prop
```
（如
```
:pageSize="20"
```
）；字符串/布尔属性必须用 camelCase（如
```
rowKey="id"
```
、
```
showHeader
```
、
```
simpleMode
```
），禁止 kebab-case（如
```
row-key
```
、
```
show-header
```
）

TypeScript：推荐使用
```
<script setup lang="ts">
```

This project is based on Vue 3, and the following basic principles must be followed:

Composition API: Uniformly use

<script setup>

syntax, forbid using Options API (

export default { data(), methods, computed, watch }

)

Reactivity: Use
```
ref()
```
/
```
reactive()
```
to declare reactive states, forbid using
```
this
```
. When passing complex data (objects/arrays) to Web Components, since the underlying layer needs to detect reference changes, absolutely forbid in-place modifications like
```
push
```
or
```
splice
```
, and must trigger rendering by reassigning to generate a new reference (e.g.,
```
data.value = [...data.value, new]
```
).
Lifecycle: Use Composition API hooks such as
```
onMounted()
```
/
```
onUnmounted()
```

Template Syntax:

Property Binding:
```
:prop="value"
```
Event Binding:
```
@sl-change="handler"
```
(Shoelace components use the
```
@sl-*
```
prefix)

Passing object/array properties to Web Components: Must use camelCase +
.prop
modifier:

html

【✅ Correct】 <sl-table :dataSource.prop="rows" :columns.prop="cols" :rowSelection.prop="sel"></sl-table>
【❌ Wrong】 <sl-table :data-source="rows" :row-selection="sel"></sl-table>

Numeric type properties use camelCase without
```
.prop
```
(e.g.,
```
:pageSize="20"
```
); string/boolean properties must use camelCase (e.g.,
```
rowKey="id"
```
,
```
showHeader
```
,
```
simpleMode
```
), forbid kebab-case (e.g.,
```
row-key
```
,
```
show-header
```
)

TypeScript: Recommended to use
```
<script setup lang="ts">
```

3. 标准工作流 (Workflow)

3. Standard Workflow (Workflow)

新建组件：
- 必须使用 CLI 工具，严禁手工创建文件：
  bash
```
kd project create [组件名] --type kwc
```
- 组件命名遵循
```
PascalCase
```
  。
代码实现与修改：
- 学习：优先参考
```
app/kwc/exampleComponent
```
  。
- 严格合规：代码必须符合本 Skill 目录下的
```
rule.md
```
  中的所有约束（导入规范、事件绑定等）。
- Shoelace 集成：涉及 Shoelace 组件时，确保从 correct path 导入。
验证与交付：
- 按项目入口更新
```
app/kwc/main*
```
  引用。
- 运行
```
npm run dev
```
  进行验证。

Create New Component:
- Must use CLI tool, manual file creation is strictly prohibited:
  bash
```
kd project create [component-name] --type kwc
```
- Component naming follows
```
PascalCase
```
  .
Code Implementation and Modification:
- Learning: Prioritize referencing
```
app/kwc/exampleComponent
```
  .
- Strict Compliance: Code must comply with all constraints in rule.md in this Skill directory (import specifications, event binding, etc.).
- Shoelace Integration: When involving Shoelace components, ensure import from the correct path.
Verification and Delivery:
- Update
```
app/kwc/main*
```
  references according to the project entry.
- Run
```
npm run dev
```
  for verification.

4. 关键约束摘要 (详细请见本 Skill 目录下的 rule.md)

4. Key Constraint Summary (See rule.md in this Skill directory for details)

导入：

import '@kdcloudjs/shoelace/dist/components/input/input.js';

模板：使用
```
<sl-input>
```
(kebab-case)。
事件：使用
```
@sl-change
```
绑定。
CSS：样式必须使用 Shoelace Design Token（
```
var(--sl-color-*)
```
、
```
var(--sl-spacing-*)
```
、
```
var(--sl-font-size-*)
```
、
```
var(--sl-border-radius-*)
```
），禁止硬编码 hex 色值和 px 数值。详见
```
./reference/css-design-tokens.md
```
。

Import:

import '@kdcloudjs/shoelace/dist/components/input/input.js';

Template: Use
```
<sl-input>
```
(kebab-case).
Events: Use
```
@sl-change
```
for binding.
CSS: Styles must use Shoelace Design Token (
```
var(--sl-color-*)
```
,
```
var(--sl-spacing-*)
```
,
```
var(--sl-font-size-*)
```
,
```
var(--sl-border-radius-*)
```
), hardcoding hex color values and px numbers is forbidden. See
```
./reference/css-design-tokens.md
```
for details.

5. 常用资源

5. Common Resources

扩展组件文档（位于本 Skill 的
```
reference/
```
目录下）：
- Table:
```
reference/table/index.md
```
- DatePicker:
```
reference/datepicker/index.md
```
- TimePicker:
```
reference/sl-timepicker.md
```
- Pagination:
```
reference/sl-pagination.md
```
- 使用前必须阅读相应文档。
标准组件文档：https://shoelace.style/

Extended Component Documentation (located in the
```
reference/
```
directory of this Skill):
- Table:
```
reference/table/index.md
```
- DatePicker:
```
reference/datepicker/index.md
```
- TimePicker:
```
reference/sl-timepicker.md
```
- Pagination:
```
reference/sl-pagination.md
```
- Must read the corresponding documentation before use.
Standard Component Documentation: https://shoelace.style/

6. 输出检查清单

6. Output Checklist

提交代码前，请自查：

使用 Vue 3 Composition API (
```
<script setup>
```
)，未使用 Options API

新建组件使用了

kd project create [组件名] --type kwc

已阅读并遵守本 Skill 目录下的
```
rule.md
```
中的所有约束
导入了所有使用的 Web Components
模板标签为 kebab-case
事件使用
```
@sl-*
```
未运行任何 ESLint/Prettier 修复命令，并忽略了所有 ESLint 格式报错

Before submitting code, self-check:

Used Vue 3 Composition API (
```
<script setup>
```
), did not use Options API

Used

kd project create [component-name] --type kwc

for new components

Read and complied with all constraints in rule.md in this Skill directory
Imported all used Web Components
Template tags are kebab-case
Events use
```
@sl-*
```
Did not run any ESLint/Prettier fix commands, and ignored all ESLint format errors