特性

赞助

Join Me

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

简要介绍

• 组件库采用 Vue@3.5.44 + TypeScript@5.9.3 + Vite@7.3.7 + Less@4.9.1 实现！
• 目前共包含 73 个基础 UI 组件以及 16 个工具函数，并且持续探索更新中...
• 主题可调，你只需提供一个主题色，剩下的都交给我
• 顺便一提，它们全都可以 treeshaking
• Vue Amazing UI 全量使用 TypeScript 编写，和你的 TypeScript 项目无缝衔接
• 全部组件均采用单文件组件 SFC，可独立使用
• 所有组件已适配 light / dark，与文档站的明暗切换同源，切换即生效
• 开箱即用，不墨迹

主题系统

种子 → 派生 → CSS 变量 → 组件消费，JS 只算一次，换肤不重建样式、不闪烁

改整套用 ConfigProvider 的 theme.seed，切浅色 / 暗色用 theme.mode，单组件主色用 theme.components.<组件>.primaryColor，单点用 --va-<组件>-* 令牌。

详见定制主题，组件级令牌见同页附录。

使用方式

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

全局默认样式

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

// 组件库全局样式定义（主题变量表由构建期内联在此之上，为便于阅读此处省略）
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  -webkit-tap-highlight-color: transparent;
}
// 字体归位：库不在 body 上声明字体，字体由宿主决定（谁提供字体谁声明）；
// 库只兜底原生表单控件 —— 它们的字体不受继承影响（UA 样式强制 Arial / monospace 等），必须显式 inherit；
// 用 :where() 包裹使特异性为 0，使用方任意同名规则均可覆盖（不受样式加载顺序影响）
:where(input, textarea, select, button) {
  font-family: inherit;
}
:where(a) {
  color: var(--va-link-color);
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
  &:hover {
    color: var(--va-link-color-hover);
  }
  &:active {
    color: var(--va-link-color-active);
  }
  &[disabled] {
    color: var(--va-text-color-disabled);
    cursor: not-allowed;
  }
}

:where(a) 是全库唯一的链接基座，颜色取语义变量 --va-link-*（默认值来自静态变量表，ConfigProvider 按种子派生后覆盖）；因外层包裹 :where() 而特异性为 0，使用方的任意链接样式都能覆盖它。主题请通过 全局化配置 ConfigProvider 的 theme.seed 定制，插入光标等页面级样式由使用方在自己的页面样式中定义。