jw-design 组件库

jw-design 是一个基于 Vue 3 和 Arco Design Vue 的现代化 UI 组件库，旨在提供高度可定制、易于使用的组件，适用于各种 Web 应用开发场景。所有组件支持 TypeScript、响应式设计和全局配置，满足企业级开发需求。

安装

npm install jw-design

在主应用中注册组件库，并可选择设置全局配置：

import { createApp } from "vue";
import App from "./App.vue";
import JwDesign from "jw-design";
import "jw-design/style.css";

const app = createApp(App);
app.use(JwDesign, { size: "small" }); // 可选：设置全局组件大小
app.mount("#app");

特性

• 高可定制性：通过 Props、Slots 和全局配置满足多样化需求。
• TypeScript 支持：提供完整的类型定义，提升开发体验。
• 全局配置：支持统一的组件大小配置，基于 ComponentsConfig。
• 响应式设计：适配多种屏幕尺寸，优化用户体验。
• Arco Design 集成：无缝使用 Arco Design Vue 的样式和图标。

组件目录

以下是当前可用的组件，点击链接查看详细文档：

• SimplePagination：一个灵活的分页组件，支持页码导航、总数显示、按钮自定义和整体大小调整。

更多组件即将推出，敬请期待！

全局配置

jw-design 支持通过全局配置统一设置组件的整体大小（影响字体、间距、容器尺寸等）。配置定义在 src/config/ComponentsConfig.ts 中，默认值为 medium。

示例

app.use(JwDesign, { size: "small" });

大小选项

| 大小 | 缩放因子 | 描述 | | -------- | -------- | -------------------------- | | small | 0.8 | 较小的字体、间距和容器尺寸 | | medium | 1 | 默认尺寸，适合大多数场景 | | large | 1.2 | 较大的字体、间距和容器尺寸 |

版本信息

• 当前版本：[email protected]
• 支持 Vue：^3.5.13
• 支持 Arco Design Vue：^2.57.0