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/。 。 。 .

* 安装

npm install @appsbd/vue3-appsbd-ui

同伴依赖关系

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

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 自动复制以下文件:

可用的斜线命令

示例

/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 安装时 :

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

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

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:

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");

应用主题外观( 可选)

// 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";

++ 核心组件和可编组

标签

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

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系统专注于美学一致性.

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

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

主题管理

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

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

组件参考

许可证

麻省理工学院