要考虑哪些东西？

• 自己的需求： 通用组件，要考虑灵活性以及可拓展性，

• 符合直觉： 就，多去思考用户下意识会想到的用法； 比如一个输入框，要在它的最左边加一个icon

如果是React，一般都会想到在label中加一个组件，将其作为children；

// 推荐实现方式
<Input>
  <Icon name="search" /> {/* 作为children插入 */}
</Input>

// 或通过特定props
<Input prefixIcon={<Icon />} suffixIcon={<Icon />} />

如果是Vue，一般在使用slot：

<!-- 组件定义 -->
<template>
  <div class="input-wrapper">
    <slot name="prefix"></slot>
    <input />
  </div>
</template>

<!-- 组件使用 -->
<MyInput>
  <template #prefix>
    <Icon icon="search" />
  </template>
</MyInput>

• 允许用户自定义样式，以适应不同的业务需求以及场景； 当时是配置了一些常用的场景，比如small-mid-large的尺寸；

代码层面：

• 统一代码规范

使用eslint进行风格检查，使用prettier进行统一的代码格式化； 比较推荐的方式就是配置.vscode文件下保存的时候的统一规则以及统一格式化； 以及，在git commit的时候进行静态检查以及卡控；

• 统一的钩子工具函数 （不要重复造轮子，而是造一个统一且好用的轮子）

css

• 样式隔离，避免污染； 一般通过css module；