如何写一个组件

以脚手架自带的 Tag 标签 示例组件为例，说明如何编写一个组件。

---

一、步骤概览

1. packages/tag/Tag.vue    编写组件源码
2. packages/tag/index.js   导出组件
3. packages/index.js      注册到统一入口

---

二、命名规范

类型	规范	Tag 示例
组件目录	kebab-case	tag
组件文件	PascalCase	Tag.vue
组件名	Vui3 + PascalCase（模板用 <vui3-tag>）	Vui3Tag
CSS 类名	vui3- + kebab-case + BEM	vui3-tag、vui3-tag--primary

---

三、第一步：编写组件源码

3.1 目录结构

packages/tag/
├── Tag.vue     # 组件源码
└── index.js    # 导出文件

3.2 Tag.vue 完整代码

<template>
  <span class="vui3-tag" :class="`vui3-tag--${type}`" @click="onClick">
    <slot>{{ text }}</slot>
  </span>
</template>

<script setup>
defineProps({
  /** 展示文字 */
  text: { type: String, default: "" },
  /** 类型：default / primary / success */
  type: { type: String, default: "default" },
});

const emit = defineEmits(["click"]);

const onClick = (e) => emit("click", e);

defineOptions({ name: "Vui3Tag" });
</script>

<style scoped>
.vui3-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.vui3-tag--default {
  background: #f0f0f0;
  color: #333;
}

.vui3-tag--primary {
  background: #1989fa;
  color: #fff;
}

.vui3-tag--success {
  background: #07c160;
  color: #fff;
}
</style>

要点：

• defineOptions({ name: "Vui3Tag" }) 必须写，模板中使用 <vui3-tag>
• 根元素 class 以 vui3- 开头，修饰符用 vui3-tag--${type}
• 样式使用 scoped

---

四、第二步：导出组件

packages/tag/index.js

import TagComponent from "./Tag.vue";

TagComponent.install = (app) => {
  app.component("Vui3Tag", TagComponent);
};
export { TagComponent as Tag }; // 导出 Tag，app.use(Tag) 后模板用 <vui3-tag>

---

五、第三步：注册到统一入口

编辑 packages/index.js，添加导入、components 数组和导出：

import { Tag } from "./tag";

const components = [Tag];

const install = (app) => {
  components.forEach((comp) => {
    if (comp && comp.name) {
      app.component(comp.name, comp);
    }
  });
};

export { Tag } from "./tag";

export default { install };

---

六、验证

pnpm build:lib

确认 dist/es/tag/、dist/lib/tag/ 已生成。