特性

Join Me

如果您对 Vue Amazing UI 感兴趣，欢迎加入我，一起开发、维护和迭代组件库。您的贡献将帮助组件库不断的更新与完善，共同打造更 Amazing 的 UI 组件库！

简要介绍

组件库采用 Vue@3.5.42 + TypeScript@5.9.3 + Vite@7.3.1 + Less@4.5.1 实现！
目前共包含 72 个基础 UI 组件以及 22 个工具函数，并且持续探索更新中...
主题可调，你只需提供一个主题色，剩下的都交给我
顺便一提，它们全都可以 treeshaking
Vue Amazing UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接
全部组件均采用单文件组件 SFC，可独立使用
部分组件样式尚未完美适配文档主题的 dark 暗黑模式，可切换 light 模式查看
开箱即用，不墨迹

使用方式

引入方式	特点	推荐度
全局完整注册所有组件	一次全量注册，引入即用，包体积最大	不推荐
全局部分注册组件	手动注册需要的组件	按需
局部注册组件	单个组件内 `import` 后使用	按需
自动按需引入	`unplugin-vue-components` 自动解析并导入组件与样式	强烈推荐
单文件组件 `SFC`	无需任何安装引入，直接使用组件源码	—

全局默认样式

每个组件的样式入口（如 import 'vue-amazing-ui/es/button/style'）已内含下面的全局默认样式，无需单独引入（推荐使用自动按需引入）：

less

// 组件库全局样式定义
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  -webkit-tap-highlight-color: transparent;
}
:where(a) {
  color: var(--va-link-color, #1677ff);
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
  &:hover {
    color: var(--va-link-color-hover, #69b1ff);
  }
  &:active {
    color: var(--va-link-color-active, #0958d9);
  }
  &[disabled] {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
  }
}

:where(a) 是全库唯一的链接基座，默认链接配色取自主色色阶（常态 / 悬停 / 按下依次取第 6 / 4 / 7 级）；因外层包裹 :where() 而特异性为 0，使用方的任意链接样式都能覆盖它。主题色请通过全局化配置 ConfigProvider 的 theme 定制，插入光标等页面级样式由使用方在自己的页面样式中定义。

特性 ​

简要介绍 ​

使用方式 ​

全局默认样式 ​

特性

简要介绍

使用方式

全局默认样式