# @appsbd/vue3-appsbd-ui 中文文档

规范地址：https://npmcn.com/package/%40appsbd/vue3-appsbd-ui/

版本：2\.0\.5
npm 元数据更新时间：2026-11-04T16:06:20.846Z
中文译文更新时间：2026-11-06T23:43:25.243Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40appsbd/vue3-appsbd-ui
原文对照：https://npmcn.com/package/%40appsbd/vue3-appsbd-ui/?lang=original
项目主页：https://uilibs.appsbd.com/
源码仓库：https://github.com/sarwarcse/vue3-appsbd-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.6 MB，124 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：vue \>=3\.3\.0，echarts \>=5\.5\.0，bootstrap \>=5\.3\.7，vue-router \>=4\.5\.0，@lucide/vue \>=1\.28\.0，vue-echarts \>=6\.6\.9，tiny-emitter \>=2\.1\.0，vee-validate \>=4\.15\.1，vue3-gettext \>=2\.4\.0，@vee-validate/rules \>=4\.15\.1，@appsbd/vue3-elite-grid \>=3\.0\.3
- 首次发布：2026-04-23T12:04:34.839Z
- 最新版本发布：2026-11-04T16:06:20.615Z
- 近 30 天下载量：2155（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：31（近 12 个月 31 个）

## 中文简介

可重用 Vue 3 组件库

## 安装

```sh
npm install @appsbd/vue3-appsbd-ui
```

也可以使用：`pnpm add @appsbd/vue3-appsbd-ui`、`yarn add @appsbd/vue3-appsbd-ui`、`bun add @appsbd/vue3-appsbd-ui`

## README

# Vue 3 Appsbd 用户界面库

为高性能企业应用程序所建的溢价,可再用Vue 3组件库. 积分 **维特**, (中文(简体) ), **常设委员会**,以及 **靴子陷阱 5** 以内置的暗黑模式和RTL支持提供丰富的UI组件. 1.0.8版 翻译

## 关键特性

-   **Vue 3 组成 API**: 业绩和灵活性优化.
-   **动态主题**: 使用 Bootstrap 的全暗模式支持 `data-bs-theme`。 。 。 .
-   **RTL 准备**: 以 CSS 逻辑属性为全球可访问性而建.
-   **插件系统**:定制的吐司和警报全球系统.
-   **企业准备**: 包括多选择、 DatePicker、 向导、 定价表和过滤面板等复杂组件.
-   **可切除皮肤**: 10 预建的彩色皮肤(默认,绿色,红色,青色,紫色,紫色,粉色,橙色,灰色,黑色)作为独立的CSS在下方被运出 `dist/skins/`。 。 。 .

## \* 安装

```bash
npm install @appsbd/vue3-appsbd-ui
```

### 同伴依赖关系

保证您在您的工程中安装以下设备 :

```bash
npm install bootstrap bootstrap-icons vee-validate @vee-validate/rules vue-router vue3-gettext @lucide/vue tiny-emitter @appsbd/vue3-elite-grid
```

## AI 助理整合

将这个库自动复制AI技能到您的项目中,这样基于克洛德代码和基于代理的工具就可以生成正确的组件代码,而无需猜测道具或导入.

### 安装什么

运行 `npm install @appsbd/vue3-appsbd-ui` 自动复制以下文件:

| 目标 | 目的 |
| --- | --- |
| `.claude/commands/` | Claude Code 的斜线命令 (`/use-appsbd-ui`, (中文(简体) ), `/generate-module`(中文(简体) ) |
| `.claude/skills/` | 由 Claude 代码自动检测的技能 |
| `.agent/workflows/` | 基于代理工具的工作流程命令 |
| `.agent/skills/` | 基于代理工具的技能 |

### 可用的斜线命令

| 命令 | 说明 |
| --- | --- |
| `/use-appsbd-ui` | 在生成任何代码之前装入组件引用 |
| `/generate-module` | 脚手架 特定实体的完整 CRUD 模块(列表 + 形式 + 可编译) |

**示例**

```
/generate-module

Module: Invoice
Fields:
- title (text, required)
- amount (number, required, min: 0)
- status (select: Draft | Sent | Paid, required)
- due_date (date)

API: /api/invoices
Output: src/modules/invoices/
```

### 可选:启用额外的AI工具

还安装 Cursor 或 Windsurf 的技能,通过 `APPSBD_AGENTS` 安装时 :

```bash
APPSBD_AGENTS=cursor npm install @appsbd/vue3-appsbd-ui
APPSBD_AGENTS=cursor,windsurf npm install @appsbd/vue3-appsbd-ui
```

或安装后随时运行设置脚本 :

```bash
node node_modules/@appsbd/vue3-appsbd-ui/scripts/setup.js --cursor --windsurf
```

### 手动参考

如果您不愿使用自动安装的技能, 引用文件包含在软件包中 :

-   `node_modules/@appsbd/vue3-appsbd-ui/AI_REF.md` – 紧凑组件指数(~500个令牌,从这里开始)
-   `node_modules/@appsbd/vue3-appsbd-ui/AI_REFERENCE.md` - 附有说明的完整表格
-   `node_modules/@appsbd/vue3-appsbd-ui/.ai/ai_ref_[Name].md` ——每个组件道具/活动/片段

点你的人工智能读 `AI_REF.md` 首先,然后具体 `.ai/` 用于您所需的组件的文件.

## QQ 设置

在您主条目文件中注册库及其样式(例如, `main.js`:

```javascript
import { createApp } from "vue";
import AppsbdUI from "@appsbd/vue3-appsbd-ui";
import "@appsbd/vue3-appsbd-ui/style.css";

const app = createApp(App);
app.use(AppsbdUI);
app.mount("#app");
```

### 应用主题外观( 可选)

```javascript
// Default skin
import "@appsbd/vue3-appsbd-ui/dist/skins/default.css";

// Or any other prebuilt skin
import "@appsbd/vue3-appsbd-ui/dist/skins/purple.css";
```

## ++ 核心组件和可编组

### 标签

图书馆包括一个强大的自定义土司系统,其功能是停放和停放.

```javascript
import { useToast } from "@appsbd/vue3-appsbd-ui";
const { toast } = useToast();

toast.success("Changes saved!", { timeout: 3000 });
toast.error("An error occurred", { position: "top-center" });
```

### 全球警报

集成SweetAlert2系统专注于美学一致性.

```javascript
import { useAlert } from "@appsbd/vue3-appsbd-ui";
const { alert } = useAlert();

alert.success("Success!", "Your profile has been updated.");
```

### 主题管理

轻松地切换出光和暗模式.

```javascript
import { useTheme } from "@appsbd/vue3-appsbd-ui";
const { isDark, toggleTheme } = useTheme();
```

## 组件参考

| 构成部分 | 说明 |
| --- | --- |
| `AbAvatar` | 有状态指标和大小变体的剖面图. |
| `AbBadge` | 标记状态和计数组件 . |
| `AbButton` | 高度定制的按钮 装载状态. |
| `AbCard` | 分类内容的灵活容器(通过CSS类支持瓦片/物品/洞察变体). |
| `AbCarousel` | 反应木马/滑行. |
| `AbColorPicker` | 视觉色彩选择界面. |
| `AbConfirmPopover` | 多步交互式弹出器用于确认和Aync流. |
| `AbCustomField` | 用于创建自定义窗体输入的基础包装器 . |
| `AbDarkModeToggler` | 一击轻/暗主题切换. |
| `AbDateTimePicker` | 全天候日期和时间选择(由v-日历驱动). |
| `AbDropdown` | 自定义样式下拉菜单 . |
| `AbEasyModal` | 简单对话框的轻量级模式 . |
| `AbField` | 带有标签/帮助/错误槽的普通窗体字段包装. |
| `AbFileUploader` | 拖放文件上传界面 . |
| `AbFilterPanel` | 全面过滤数据重视图的UI. |
| `AbFormCheck` 编号 : `AbRadioInput` | 标准化复选框/无线电控制. |
| `AbImageRadioInput` | 以可选图像平板显示的无线电组 . |
| `AbInputField` | 高质量的文本输入与验证/反馈. |
| `AbInputTag` | 标记/ 多值输入字段 . |
| `AbKbd` 编号 : `AbKbdGroup` | 键盘快捷键显示为原始. |
| `AbModal` | 具有过渡的精密对话框系统 . |
| `AbMultiSelect` | 高级可搜索多选择的下拉(内建,替换) `@vueform/multiselect`) (中文(简体) ). |
| `AbNavLink` | 侧边栏和菜单的导航链接. |
| `AbNumberField` | 数字输入; `variant="stepper"` 增加增减步骤控制. |
| `AbPinInput` | 部分检察官办公室/PIN条目输入. |
| `AbPopover` | 浮出水面 由浮出水面. |
| `AbPricingCard` 编号 : `AbPricingContainer` 编号 : `AbPricingTable` | 可混合定价计划构件. |
| `AbProgressbar` | 平滑,动画进度跟踪. |
| `AbScrollbar` | 样式自定义滚动容器 . |
| `AbSettingsForm` | 有意见的设置/首选项形式布局. |
| `AbSidebar` 编号 : `AbSideMenuItem` | 动态侧边栏导航组件. |
| `AbSkeleton` | 装入状态骨架占位符. |
| `AbSlider` | 数值范围选择滑动器. |
| `AbTable` | 与项目默认样式相配合的数据表. |
| `AbTabs` 编号 : `AbTab` | 响应制表符接口. |
| `AbToast` | 高性能通报制度. |
| `AbToggle` | 可访问切换/切换组件 . |
| `AbTooltip` | 由活浮-Vue提供动力的浮起工具提示. |
| `AbWizard` 编号 : `AbWizardStep` | 多步法师流. |

## 许可证

麻省理工学院

## 常见问题

### @appsbd/vue3-appsbd-ui 是什么？

可重用 Vue 3 组件库

### 如何安装 @appsbd/vue3-appsbd-ui？

在项目目录运行 npm install @appsbd/vue3-appsbd-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=3\.3\.0）、echarts（\>=5\.5\.0）、bootstrap（\>=5\.3\.7）、vue-router（\>=4\.5\.0）、@lucide/vue（\>=1\.28\.0）、vue-echarts（\>=6\.6\.9）、tiny-emitter（\>=2\.1\.0）、vee-validate（\>=4\.15\.1）、vue3-gettext（\>=2\.4\.0）、@vee-validate/rules（\>=4\.15\.1）、@appsbd/vue3-elite-grid（\>=3\.0\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @appsbd/vue3-appsbd-ui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/appsbd\_\_vue3-appsbd-ui 是否存在。

### @appsbd/vue3-appsbd-ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @appsbd/vue3-appsbd-ui 可以商用吗？

@appsbd/vue3-appsbd-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @appsbd/vue3-appsbd-ui 的下载量有多少？

根据 npm 官方下载统计，@appsbd/vue3-appsbd-ui 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,155 次，日均约 72 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @appsbd/vue3-appsbd-ui 还在维护吗？

最新版本 2\.0\.5 发布于 2026/11/05（3 天前）；至今共发布 31 个版本，其中过去 12 个月发布了 31 个；首次发布于 2026/04/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。