快速上手

安装

# pnpm
pnpm add airo-ui

# npm
npm install airo-ui

全量引入

// main.ts
import { createApp } from 'vue'
import AiroUI from 'airo-ui'
import 'airo-ui/dist/style.css'

import App from './App.vue'

createApp(App).use(AiroUI).mount('#app')

按需引入

import { AButton, AInput, ACheckbox } from 'airo-ui'
import 'airo-ui/dist/style.css'

Vite / Webpack 5 等现代打包工具默认支持 Tree-shaking,未使用组件不会进入产物。

在模板中使用

<template>
  <AButton variant="primary" @click="onClick">点击我</AButton>
</template>

<script setup lang="ts">
function onClick() {
  console.log('clicked')
}
</script>

主题定制

在项目全局 CSS 中覆盖 CSS 变量即可完成品牌色替换:

:root {
  --color-accent: #E85D3A;
  --color-accent-light: #F09070;
  --color-accent-subtle: rgba(232, 93, 58, 0.12);
}

完整 Token 列表见 设计 Token。