快速上手

赞助

安装

pnpm

$ pnpm add vue-amazing-ui

npm

$ npm install vue-amazing-ui

yarn

$ yarn add vue-amazing-ui

bun

$ bun add vue-amazing-ui

使用组件

全局完整注册（不推荐）

失去 tree-shaking 的能力，打包后有冗余代码

import { createApp } from 'vue'
import App from './App.vue'
import VueAmazingUI from 'vue-amazing-ui'
import 'vue-amazing-ui/css'

const app = createApp(App)
app.use(VueAmazingUI)
app.mount('#app')

按需引入（推荐）

只有导入的组件才会被打包；每个组件一个样式入口，已内含组件库全局默认样式 + 组件自身样式 + 其依赖组件样式

import { Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/style'
import 'vue-amazing-ui/es/tag/style'

• 组件可直接在 main.ts 中 app.use(Button).use(Tag) 全局注册，也可在 SFC 中按需使用；
• 更省心的是自动按需引入（无需手写样式引入），详见按需引入。

使用类型

所有类型均可直接从 vue-amazing-ui 中引入使用，无需任何额外安装

<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from 'vue-amazing-ui'
const shape = ref<ButtonProps['shape']>('default')
</script>
<template>
  <Button :shape="shape">button</Button>
</template>

使用工具函数

<script setup lang="ts">
import {
  dateFormat,
  formatNumber,
  rafTimeout,
  cancelRaf,
  throttle,
  debounce,
  add,
  downloadFile,
  toggleDark,
  useEventListener,
  useMutationObserver,
  useScroll,
  useFps,
  useMediaQuery,
  useResizeObserver,
  useSlotsExist,
  useOptionsSupported,
  getColorPalettes,
  getAlphaColor,
  getScrollParent,
  lockScroll,
  useScrollParent
} from 'vue-amazing-ui'
</script>

服务端渲染（SSR）

组件库不依赖浏览器全局对象即可完成 setup，可在 Node 环境直接渲染。但浮层类组件默认经 Teleport 挂载到 body：

• 视口固定型直接挂 body：抽屉 Drawer、对话框 Modal / Dialog、加载条 LoadingBar（挂载节点由外层的 <LoadingBarProvider> 指定）、消息提示 Message、通知提醒 Notification；
• 锚点跟随型不传 to 时优先挂到最近的承载层内容容器；服务端渲染时没有 DOM、不存在承载层，因此同样落 body：文字提示 Tooltip、气泡卡片 Popover、气泡确认框 Popconfirm、选择器 Select、自动完成 AutoComplete、级联选择 Cascader 等。

服务端渲染时其内容会收集到 ssrContext.teleports，需应用侧注入到 HTML（例如预留 <div id="teleports"></div> 并用 ssrContext.teleports 的内容替换；Nuxt 等框架已自动处理），否则首屏不含浮层内容，且客户端 hydration 会提示节点不匹配：

const ssrContext: Record<string, unknown> = {}
const html = await renderToString(app, ssrContext)
// ssrContext.teleports.body 即挂载到 body 的浮层内容，需注入到页面

也可用 to 指定其他挂载节点；to: false 表示就地渲染在当前 DOM，锚点跟随型浮层（文字提示 Tooltip / 选择器 Select / 自动完成 AutoComplete / 级联选择 Cascader）与 抽屉 Drawer / 加载条 LoadingBar（to 写在 <LoadingBarProvider> 上）支持该写法。