Vue Amazing UI
一个 Vue 3 组件库
使用 TypeScript，都是单文件组件 (SFC)，支持 tree shaking
有点意思
English | 中文
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库，包含丰富的 UI 组件和常用工具函数，并且持续不断维护更新中。另外，组件库全量使用 TypeScript，支持自动按需引入和 Tree Shaking 等，能够显著提升开发效率，降低开发成本。
文档
Vue Amazing UI
特性
- 组件库采用
Vue@3.5.13+TypeScript@5.7.2+Vite@6.0.7+Less@4.2.1实现 - 目前共包含
63个基础UI组件以及16个工具函数，并且持续探索更新中… - 顺便一提，它们全都可以
treeshaking Vue Amazing UI全量使用TypeScript编写，和你的TypeScript项目无缝衔接- 全部组件均采用单文件组件
SFC风格，可独立使用 - 开箱即用，不墨迹
安装
pnpm add vue-amazing-ui
# or
npm install vue-amazing-ui
# or
yarn add vue-amazing-ui
# or
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>
自动引入样式（推荐）
使用 vite-plugin-style-import 插件来按需自动引入组件样式，插件会自动解析模板中的使用到的组件，并导入其样式
pnpm add vite-plugin-style-import -D
# or
npm install vite-plugin-style-import -D
# or
yarn add vite-plugin-style-import -D
# or
bun add vite-plugin-style-import -D
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createStyleImportPlugin } from 'vite-plugin-style-import'
// 自动引入组件样式
import { VueAmazingUIStyleResolve } from 'vue-amazing-ui'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// imports component library styles on demandcreateStyleImportPlugin({resolves:[VueAmazingUIStyleResolve()]})]
})
然后，你可以在代码中引入使用 vue-amazing-ui 的所有组件，无论是全局部分注册的方式，还是局部注册的方式，都无需再额外引入组件样式
-
全局部分注册
import { createApp } from 'vue' import App from './App.vue' import { Button, Tag } from 'vue-amazing-ui'const app = createApp(App) app.use(Button).use(Tag) app.mount('#app') -
局部注册
<script setup lang="ts"> import { Button, Tag } from 'vue-amazing-ui' </script> <template><Button>button</Button><Tag>tag</Tag> </template>
自动按需引入（强烈推荐）
使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式
pnpm add unplugin-vue-components -D
# or
npm install unplugin-vue-components -D
# or
yarn add unplugin-vue-components -D
# or
bun add unplugin-vue-components -D
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
// vue-amazing-ui 按需引入
import { VueAmazingUIResolver } from 'vue-amazing-ui'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),Components({resolvers: [// auto import components from VueAmazingUIVueAmazingUIResolver()]})]
})
然后，你可以在代码中直接使用 vue-amazing-ui 的所有组件
<template><Button>button</Button><Tag>tag</Tag>
</template>
使用类型
所有类型均可直接从 vue-amazing-ui 中引入使用，无需任何额外安装
<script setup lang="ts">
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
} from 'vue-amazing-ui'
</script>
项目
- 获取项目代码
git clone https://github.com/themusecatcher/vue-amazing-ui.git
- 安装依赖
cd vue-amazing-uipnpm i
- 启动
pnpm dev
博客
My CSDN Blogs
组件
| 名称 | 说明 | 名称 | 说明 |
|---|---|---|---|
| Alert | 警告提示 | Avatar | 头像 |
| BackTop | 回到顶部 | Badge | 徽标 |
| Breadcrumb | 面包屑 | Button | 按钮 |
| Card | 卡片 | Carousel | 轮播图 |
| Cascader | 级联选择 | Checkbox | 复选框 |
| Collapse | 折叠面板 | Countdown | 倒计时 |
| DatePicker | 日期选择 | Descriptions | 描述列表 |
| Dialog | 对话框 | Divider | 分割线 |
| Drawer | 抽屉 | Ellipsis | 文本省略 |
| Empty | 空状态 | Flex | 弹性布局 |
| FloatButton | 浮动按钮 | GradientText | 渐变文字 |
| Grid | 栅格 | Image | 图片 |
| Input | 输入框 | InputNumber | 数字输入框 |
| InputSearch | 搜索框 | List | 列表 |
| LoadingBar | 加载条 | Message | 全局提示 |
| Modal | 模态框 | Notification | 通知提醒 |
| NumberAnimation | 数值动画 | Pagination | 分页 |
| Popconfirm | 弹出确认 | Popover | 气泡卡片 |
| Progress | 进度条 | QRCode | 二维码 |
| Radio | 单选框 | Rate | 评分 |
| Result | 结果 | Scrollbar | 滚动条 |
| Segmented | 分段控制器 | Select | 选择器 |
| Skeleton | 骨架屏 | Slider | 滑动输入条 |
| Space | 间距 | Spin | 加载中 |
| Statistic | 统计数值 | Steps | 步骤条 |
| Swiper | 触摸滑动插件 | Switch | 开关 |
| Table | 表格 | Tabs | 标签页 |
| Tag | 标签 | Textarea | 文本域 |
| TextScroll | 文字滚动 | Timeline | 时间轴 |
| Tooltip | 文字提示 | Upload | 上传 |
| Video | 播放器 | Waterfall | 瀑布流 |
| Watermark | 水印 |
工具函数
| 名称 | 说明 | 类型 |
|---|---|---|
| dateFormat | 格式化日期时间字符串函数 | (value: number | string | Date = Date.now(), format: string = ‘YYYY-MM-DD HH:mm:ss’) => string |
| formatNumber | 数字格式化函数 | (value: number | string, precision: number = 2, separator: string = ‘,’, decimal: string = ‘.’, prefix?: string, suffix?: string) => string |
| rafTimeout | 使用 requestAnimationFrame 实现的 setTimeout 或 setInterval 调用函数 | (fn: Function, delay: number = 0, interval: boolean = false) => object |
| cancelRaf | 用于取消 rafTimeout 函数 | (raf: { id: number }) => void |
| throttle | 节流函数 | (fn: Function, delay: number = 300) => any |
| debounce | 防抖函数 | (fn: Function, delay: number = 300) => any |
| add | 消除 js 加减精度问题的加法函数 | (num1: number, num2: number) => number |
| downloadFile | 下载文件并自定义文件名，未传 name 时，从文件地址中自动提取文件名称 | (url: string, fileName?: string) => void |
| toggleDark | 一键切换暗黑模式函数 | () => void |
| useEventListener | 使用 Vue 的生命周期钩子添加和移除事件监听器 | (target: HTMLElement | Window | Document, event: string, callback: Function) => void |
| useMutationObserver | 使用 MutationObserver 观察 DOM 元素的变化 | (target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: MutationCallback, options = {}) => object |
| useScroll | 实时监测目标元素滚动位置及状态 | (target: Ref | HTMLElement | Window | Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => object |
| useFps | 实时监测浏览器刷新率FPS | () => object |
| useMediaQuery | 使用媒体查询来判断当前环境是否符合指定的媒体查询条件 | (mediaQuery: string) => object |
| useResizeObserver | 使用 ResizeObserver 观察 DOM 元素尺寸变化 | (target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: ResizeObserverCallback, options = {}) => object |
| useSlotsExist | 监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在 | (slotsName: string | string[] = ‘default’) => Reactive | Ref<boolean> |
