快速上手

赞助

安装

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 { createApp } from 'vue'
import App from './App.vue'
import { Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/Button.css'
import 'vue-amazing-ui/es/tag/Tag.css'

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

局部注册组件

这种情况下，也只有导入的组件才会被打包

<script setup lang="ts">
import { Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/Button.css'
import 'vue-amazing-ui/es/tag/Tag.css'
</script>
<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

全局部分注册和局部注册组件，都需手动引入组件库全局默认样式（推荐使用自动按需引入）

import { createApp } from 'vue'
import App from './App.vue'
import 'vue-amazing-ui/es/style/global.css' // 引入全局默认样式

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

使用类型

所有类型均可直接从 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,
  useInject,
  useOptionsSupported,
  getColorPalettes,
  getAlphaColor,
  getScrollParent,
  lockScroll,
  useScrollParent,
  useFloatingPosition
} from 'vue-amazing-ui'
</script>

服务端渲染（SSR）

组件库不依赖浏览器全局对象即可完成 setup，可在 Node 环境直接渲染。但 抽屉 Drawer、对话框 Modal / Dialog、加载条 LoadingBar、消息提示 Message、通知提醒 Notification 默认挂载到 body（Teleport），服务端渲染时其内容会收集到 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 指定其他挂载节点（Drawer、LoadingBar 等还支持 to: false，渲染在当前 DOM）。