基础组件库建设方案（支持业务系统与公共基础服务）

基础组件库建设方案（支持业务系统与公共基础服务）

---

一、组件分类与作用

组件类别	典型组件	作用	适用场景
表单类	输入框、下拉框、日期选择器、表单校验	统一数据录入交互，减少重复开发	所有含表单的页面（注册、配置、搜索等）
导航类	导航菜单、标签页、面包屑	提升用户路径清晰度	后台管理系统、多级页面导航
数据展示类	表格、图表、分页器	标准化数据呈现方式	数据看板、报表页面、列表页
反馈类	消息提示、加载动画、对话框	增强用户操作反馈	操作成功/失败提示、数据加载时
布局类	栅格系统、折叠面板、拖拽排序	快速搭建页面骨架	后台管理、大屏可视化、配置页面

---

二、详细实现步骤与代码示例

以下以 Vue 3 + TypeScript + Vite 为例，实现一个可复用的 表单输入框组件。

1. 技术栈选择

• 框架: Vue 3（Composition API）
• 工程化: Vite + Vue CLI
• 样式: SCSS + 原子化CSS（如Windi CSS）
• 国际化: vue-i18n
• 主题定制: CSS变量 + vue-themeable

2. 项目结构

src/
├── components/
│   └── form/
│       ├── index.ts (导出组件)
│       ├── Input.vue (输入框组件)
│       └── config.ts (默认配置)
├── themes/
│   └── default.scss
├── utils/
│   └── validation.ts (表单校验工具)
└── main.ts

3. 代码实现

Input.vue

<template><div class="input-wrapper" :class="{ 'error': hasError }"><input:value="modelValue"@input="emitModelValue($event)"v-bind="$attrs"ref="inputRef"/><span v-if="errorMessage" class="error-msg">{{ errorMessage }}</span></div>
</template><script setup lang="ts">
import { ref, watch, toRefs } from 'vue';
import { validateInput } from '@/utils/validation';interface Props {modelValue: string;rules?: Array<(value: string) => boolean>;errorMessage?: string;
}
const props = withDefaults(defineProps<Props>(), {rules: () => [(val) => val !== ''], // 默认非空校验errorMessage: '输入内容不符合要求'
});
const { modelValue, rules, errorMessage } = toRefs(props);
const inputRef = ref<HTMLInputElement>();// 处理输入事件并触发校验
const emitModelValue = (e: Event) => {const value = (e.target as HTMLInputElement).value;emit('update:modelValue', value);
};// 错误状态计算
const hasError = ref(false);
watch(modelValue, (val) => {hasError.value = !rules.value.every((rule) => rule(val));
});
</script><style scoped>
.input-wrapper { position: relative; }
.error-msg { color: red; font-size: 12px; }
</style>

config.ts（默认配置）

export const inputDefaultConfig = {width: '100%',height: '32px',fontSize: '14px',borderRadius: '4px',borderColor: '#ccc',// 支持主题变量覆盖themeVars: {borderColorFocus: 'var(--primary-color)'}
};

validation.ts（校验工具）

export function validateInput(value: string, rules: Array<(val: string) => boolean>): boolean {return rules.every((rule) => rule(value));
}

---

三、实现原理与场景说明

1. 双向绑定与属性代理

   • 通过 v-model 实现父子组件数据同步，$attrs 代理未显式声明的属性（如 placeholder、disabled）。
   • 适用场景: 表单页面（如用户信息编辑、搜索过滤）。

2. 动态校验与错误反馈

   • 使用 watch 监听 modelValue 变化，实时触发校验规则。
   • 原理: 将校验逻辑抽离为独立工具函数，支持自定义规则（如正则、长度限制）。
   • 适用场景: 需要即时校验的表单（如注册、支付表单）。

3. 主题定制与国际化

   • 通过 CSS变量（如 --primary-color）实现主题切换，vue-i18n 支持多语言提示文本。
   • 原理: 样式与逻辑分离，通过 :class 动态绑定错误状态。
   • 适用场景: 多语言平台、个性化品牌定制。

---

四、扩展与复用

1. 封装为npm包

   • 在 package.json 中配置 sideEffects，发布到私有仓库：

     "main": "dist/form-components.umd.js",
     "files": ["dist/*"],
     "sideEffects": false
     

   • 使用示例:

     npm install @my-org/form-components
     # 在项目中直接引用
     import { Input } from '@my-org/form-components';
     

2. 组合成业务组件

   • 将基础组件与业务逻辑结合，例如：

     <template><Input v-model="username" :rules="[validateNotEmpty]" /><Input v-model="password" :rules="[validateMinLength(6)]" />
     </template>
     

---

五、其他组件实现思路

组件	关键实现点	代码片段示例
表格组件	虚拟滚动（vue-virtual-scroller）、列配置持久化	<Table :data="items" :columns="configColumns" />
导航菜单	动态路由匹配（vue-router）、权限控制	<MenuItem v-if="hasPermission('admin')" />
消息提示	自动关闭、堆叠控制	this.$toast('操作成功', { duration: 3000 });

---

通过以上步骤，可构建一个涵盖 80% 通用需求 的UI组件库，后续通过插件机制（如添加权限、日志功能）逐步扩展，最终形成业务系统与基础服务的统一技术底座。