UI卡库是前端开发中用于存放可复用界面资源的结构化集合，核心包含各类通用组件、页面模板、交互逻辑片段以及对应的设计规范说明，目的是减少重复开发工作，统一项目的视觉与交互标准。
UI卡库的核心组成
一个完整的UI卡库通常包含以下几个部分：
- 基础组件：按钮、输入框、下拉选择、弹窗等通用性极强的界面元素，支持不同状态切换
- 业务组件：结合特定业务场景封装的组件，比如订单卡片、用户信息展示栏等
- 页面模板：常见页面的完整结构，比如登录页、列表页、详情页的预设布局
- 规范文档：颜色体系、字体规范、间距标准、交互规则等说明内容，保证组件使用的一致性
如何搭建简易UI卡库
如果是小型团队或者个人项目，不需要一开始就搭建复杂的卡库系统，可以从基础组件封装开始逐步完善。以下是基于Vue3的按钮组件封装示例：
// 通用按钮组件 Button.vue
<template>
<button
class="ui-button"
:class="[`ui-button--${type}`, `ui-button--${size}`]"
:disabled="disabled"
@click="handleClick"
>
<slot></slot>
</button>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
// 按钮类型：primary / default / danger
type: {
type: String,
default: 'default'
},
// 按钮尺寸：small / medium / large
size: {
type: String,
default: 'medium'
},
// 是否禁用
disabled: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['click'])
const handleClick = (e) => {
if (!props.disabled) {
emit('click', e)
}
}
</script>
<style scoped>
.ui-button {
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s;
}
.ui-button--primary {
background-color: #1677ff;
color: #fff;
}
.ui-button--default {
background-color: #f5f5f5;
color: #333;
}
.ui-button--danger {
background-color: #ff4d4f;
color: #fff;
}
.ui-button--small {
padding: 4px 8px;
font-size: 12px;
}
.ui-button--medium {
padding: 8px 16px;
font-size: 14px;
}
.ui-button--large {
padding: 12px 24px;
font-size: 16px;
}
.ui-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
</style>
封装好组件后，可以将其统一放在项目的src/components/ui目录下，同时在项目文档中记录每个组件的参数说明和使用示例，就形成了最基础的UI卡库。
UI卡库的使用技巧
统一引入管理
可以在卡库根目录创建索引文件，统一导出所有组件，方便全局使用：
// src/components/ui/index.js
import UiButton from './Button.vue'
import UiInput from './Input.vue'
import UiModal from './Modal.vue'
const uiComponents = {
UiButton,
UiInput,
UiModal
}
export default {
install(app) {
Object.keys(uiComponents).forEach(key => {
app.component(key, uiComponents[key])
})
}
}
在入口文件中通过app.use()注册后，所有页面都可以直接使用这些组件，不需要单独引入。
按需扩展维护
UI卡库不需要一开始就做到完美，在日常开发中遇到可复用的界面元素时，及时将其封装加入卡库，同时更新对应的规范文档。如果组件需要适配新的需求，优先修改卡库中的源组件，再同步到所有使用的页面，避免重复修改。
使用UI卡库的常见注意事项
- 组件封装要避免过度耦合业务逻辑，保持通用性，业务相关逻辑尽量通过参数传入
- 每次更新卡库组件时，要做好版本记录，避免更新后导致已有页面出现兼容问题
- 设计规范要和组件同步更新，保证新加入的组件和原有组件风格统一
- 对于不常用的特殊组件，不需要强行加入卡库，避免卡库体积过大难以维护
UI卡库的核心价值是提升开发效率，不需要追求大而全，适合自身项目需求的才是最好的。