https://github.com/themusecatcher/vue-amazing-ui
基于 Vue3 + TypeScript + Vite 开发的 UI 组件库！主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking！若觉得好用，欢迎点个 ⭐️⭐️ 支持一下 🫶🫶
https://github.com/themusecatcher/vue-amazing-ui
components components-library less tree-shaking typescript vite vitepress vue3
Last synced: 7 days ago
JSON representation
基于 Vue3 + TypeScript + Vite 开发的 UI 组件库！主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking！若觉得好用，欢迎点个 ⭐️⭐️ 支持一下 🫶🫶
- Host: GitHub
- URL: https://github.com/themusecatcher/vue-amazing-ui
- Owner: themusecatcher
- Created: 2023-02-20T08:46:04.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-12T10:49:43.000Z (9 days ago)
- Last Synced: 2025-04-12T11:39:05.529Z (9 days ago)
- Topics: components, components-library, less, tree-shaking, typescript, vite, vitepress, vue3
- Language: Vue
- Homepage: https://themusecatcher.github.io/vue-amazing-ui/
- Size: 170 MB
- Stars: 320
- Watchers: 3
- Forks: 46
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Vue Amazing UI
A Vue 3 Component Library
Theme Customizable, Fully using TypeScript and SFC, Supports tree shaking.
Kinda Interesting
English | 中文
## Documentation
[Vue Amazing UI](https://themusecatcher.github.io/vue-amazing-ui/)
## Features
- The component library is implemented with `[email protected]`+ `[email protected]` + `[email protected]` + `[email protected]`.
- Currently, it includes `67` basic UI components and `17` utility functions, with continuous exploration and updates ongoing...
- Theme Customizable, all you need is to provide a theme color, then all the stuffs will be done by me.
- By the way, they are all treeshakable.
- All the stuff in Vue Amazing UI is written in TypeScript. It can work with your typescript project seamlessly.
- All components are built in single file component `SFC` and can be used independently.
- Ready to use out of the box, no fuss.
## Installation
```sh
pnpm add vue-amazing-ui
# or
npm install vue-amazing-ui
# or
yarn add vue-amazing-ui
# or
bun add vue-amazing-ui
```
## Use Components
**Global Registration All Components (Not Recommended)**
*No tree-shaking. Bundle will have redundant codes.*
```ts
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')
```
**Global Partial Registration**
*In this form, only the imported components will be bundled.*
```ts
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')
```
**Local Registration**
*In this form, only the imported components will be bundled as well.*
```vue
import { Button, Tag } from 'vue-amazing-ui'
import 'vue-amazing-ui/es/button/Button.css'
import 'vue-amazing-ui/es/tag/Tag.css'
button
tag
```
**Both Global Partial Registration and Local Registration require manually importing the global default styles of the component library ([Automatic On-Demand Import](https://themusecatcher.github.io/vue-amazing-ui/guide/ondemand.html#%E8%87%AA%E5%8A%A8%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90) is recommended).**
```ts
import { createApp } from 'vue'
import App from './App.vue'
import 'vue-amazing-ui/es/style/global.css' // 引入全局默认样式
const app = createApp(App)
app.mount('#app')
```
**Automatic On-Demand Import (Strongly Recommended)**
Use the [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components) plugin to automatically import components on demand. The plugin will automatically parse the components used in the template and import the components and styles.
```sh
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
```
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
// vue-amazing-ui on-demand import
import { VueAmazingUIResolver } from 'vue-amazing-ui'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
// auto import components from VueAmazingUI
VueAmazingUIResolver({
cjs: false // whether use commonjs build, default false
})
]
})
]
})
```
Then, you can directly use all components from `vue-amazing-ui` in your code.
```vue
button
tag
```
## Use Types
*All types can be directly imported and used from `vue-amazing-ui` without any additional installation.*
```vue
import { ref } from 'vue'
import type { ButtonProps } from 'vue-amazing-ui'
const shape = ref<ButtonProps['shape']>('default')
button
```
## Use Functions
```vue
import {
dateFormat,
formatNumber,
rafTimeout,
cancelRaf,
throttle,
debounce,
add,
downloadFile,
toggleDark,
useEventListener,
useMutationObserver,
useScroll,
useFps,
useMediaQuery,
useResizeObserver,
useSlotsExist,
useInject
} from 'vue-amazing-ui'
```
## Project
- Get the project code
```sh
git clone https://github.com/themusecatcher/vue-amazing-ui.git
```
- Install dependencies
```sh
cd vue-amazing-ui
pnpm i
```
- Run project
```sh
pnpm dev
```
- Run docs
```sh
docs:dev
```
## Blogs
[My CSDN Blogs](https://blog.csdn.net/Dandrose)
## Sponsorship
`Vue Amazing UI` is an open-source project licensed under the `MIT` license, and it is completely free to use. All work on the component library and documentation is completed by the author alone, and the development and iteration process has been challenging. For the healthy and sustainable development of the component library, your support and sponsorship are greatly appreciated.
#### [Become a Sponsor](https://themusecatcher.github.io/vue-amazing-ui/sponsor/charge.html)
## Sponsors 🫡
All sponsors will be listed here, thank you very much for your support and sponsorship ❤️
## Components
Name | Description | Name | Description
:-- | :-- | :-- | :--
Alert | 警告提示 | Avatar | 头像
BackTop | 回到顶部 | Badge | 徽标
Breadcrumb | 面包屑 | Button | 按钮
Calendar | 日历 | Card | 卡片
Carousel | 轮播图 | Cascader | 级联选择
Checkbox | 复选框 | Collapse | 折叠面板
ColorPicker | 颜色选择器 | ConfigProvider | 全局化配置
Countdown | 倒计时 | DatePicker | 日期选择器
Descriptions | 描述列表 | Dialog | 对话框
Divider | 分割线 | Drawer | 抽屉
Ellipsis | 文本省略 | Empty | 空状态
Flex | 弹性布局 | FloatButton | 浮动按钮
GradientText | 渐变文字 | Grid | 栅格
Highlight | 高亮文本 | 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 | 水印
## Functions
Name | Description | Type
:-- | :-- | :--
dateFormat | Format date-time string function | (value: number | string | Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') => string
formatNumber | Number formatting function | (value: number | string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) => string
rafTimeout | Function to implement `setTimeout` or `setInterval` using `requestAnimationFrame` | (fn: Function, delay: number = 0, interval: boolean = false) => object
cancelRaf | Function to cancel the `rafTimeout` function | (raf: { id: number }) => void
throttle | Throttle function | (fn: Function, delay: number = 300) => any
debounce | Debounce function | (fn: Function, delay: number = 300) => any
add | Addition function that eliminates precision issues in JavaScript arithmetic | (num1: number, num2: number) => number
downloadFile | Function to download a file with a custom filename; if no filename is provided, it extracts the filename from the URL | (url: string, fileName?: string) => void
toggleDark | Function to toggle dark mode | () => void
useEventListener | Function to add and remove event listeners using Vue lifecycle hooks | (target: HTMLElement | Window | Document, event: string, callback: Function) => void
useMutationObserver | Function to observe changes in DOM elements using `MutationObserver` | (target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: MutationCallback, options = {}) => object
useScroll | Function to monitor the scroll position and state of a target element in real time | (target: Ref | HTMLElement | Window | Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => object
useFps | Function to monitor the browser's refresh rate (FPS) in real time | () => object
useMediaQuery | Function to determine if the current environment matches a specified media query condition | (mediaQuery: string) => object
useResizeObserver | Function to observe changes in the dimensions of DOM elements using `ResizeObserver` | (target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: ResizeObserverCallback, options = {}) => object
useSlotsExist | Function to watch for the existence of slots with given names, supporting single slots or an array of slots | (slotsName: string | string[] = 'default') => Reactive | Ref\
useInject | A function that uses injection to obtain color palettes and shadow color | (key: string) => { colorPalettes: Ref; shadowColor: Ref }