Vue Amazing UI：好用的Vue3组件，大大提升开发速度，这款强大的Vue3组件库，组件太丰富了，几乎涵盖了你需要的控件样式，不信你自己测试

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法

Vue-Amazing-Ui是一个基于Vue.js的开源组件库，旨在为开发者提供一系列实用、美观的组件，助力快速构建出色的用户界面。该项目目前已在Github上开源，受到了许多开发者的关注。

Vue Amazing UI的基本情况

（一）技术栈

Vue Amazing UI采用了 Vue@3.5.13 + TypeScript@5.7.3 + Vite@6.0.8 + Less@4.2.2的强大技术组合来实现。这意味着它在现代前端开发的框架下，能够充分利用这些技术的优势，为开发者提供稳定、高效的组件。

（二）组件和函数数量

目前，这个组件库共包含了64个基础UI组件以及16个工具函数，并且还在持续探索更新中。这丰富的组件和函数资源，几乎涵盖了我们在前端开发中常见的各种需求。

（三）Tree - shaking特性

值得一提的是，这些组件和函数全都支持 treeshaking。这一特性对于优化项目的打包体积非常有帮助，它能够确保只有实际使用到的代码才会被打包，避免了冗余代码的产生，提高了项目的性能。

（四）TypeScript编写

整个Vue Amazing UI全量使用 TypeScript 编写，这使得它能够与开发者的 TypeScript 项目无缝衔接。对于那些已经在使用 TypeScript 的团队或者开发者来说，这无疑是一个很大的优势，可以减少很多在类型定义和兼容性方面的麻烦。

（五）单文件组件风格

所有组件均采用单文件组件（SFC）风格，这种风格的好处是组件可以独立使用，具有很高的灵活性。每个组件都像是一个独立的小模块，开发者可以根据自己的需求轻松地在项目中引入和使用。

Vue Amazing UI的安装方法

（一）通过包管理器安装

安装Vue Amazing UI非常简单，你可以使用各种流行的包管理器。例如：

使用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')

（二）全局部分注册

这种情况下，只有导入的组件才会被打包。例如，我们要使用 Button 和 Tag 组件：

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"> 中导入组件并在 <template> 中使用：

<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：pnpm add vite - plugin - style - import - D
使用npm：npm install vite - plugin - style - import - D
使用yarn：yarn add vite - plugin - style - import - D
使用bun：bun add vite - plugin - style - import - D

然后在 vite.config.ts 中进行配置：

// 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 demand
    createStyleImportPlugin({
      resolves: [
        VueAmazingUIStyleResolve()
      ]
    })
  ]
})

这样，无论是全局部分注册还是局部注册组件，都无需再额外引入组件样式。

（五）自动按需引入（强烈推荐）

使用 unplugin - vue - components 插件来按需自动加载组件。先安装插件：

使用pnpm：pnpm add unplugin - vue - components - D
使用npm：npm install unplugin - vue - components - D
使用yarn：yarn add unplugin - vue - components - D
使用bun：bun add unplugin - vue - components - D

然后在 vite.config.ts 中配置：

// 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 VueAmazingUI
        VueAmazingUIResolver()
      ]
    })
  ]
})

配置好后，就可以在模板中直接使用 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"> 中直接导入即可。例如：

<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>

Vue Amazing UI的组件和工具函数功能展示

（一）组件功能

Alert（警告提示）
- 在用户操作需要提醒或者出现错误等情况时，可以使用 Alert 组件。例如，当用户输入错误的登录信息时，弹出一个 Alert 组件，显示“用户名或密码错误，请重新输入”的提示信息。
Avatar（头像）
- 在社交类应用或者用户信息展示页面，Avatar 组件可以用来显示用户的头像。它可以接受不同的图片源，并且可以根据设计需求设置不同的形状、大小等样式。
BackTop（回到顶部）
- 对于页面较长的网站，如新闻网站或者电商产品列表页面，当用户滚动到页面底部后，想要快速回到顶部时，BackTop 组件就非常有用。用户点击这个组件，页面就会平滑地滚动到顶部。
Button（按钮）
- 这是最常用的组件之一。在各种交互场景下都需要按钮，比如提交表单、触发某个操作等。可以根据不同的设计风格设置按钮的颜色、大小、形状等属性。
Card（卡片）
- 用于展示一些信息的集合，比如在电商平台上展示商品信息，在新闻网站上展示文章摘要等。卡片可以包含图片、标题、描述等元素，并且可以进行排版布局。
Carousel（轮播图）
- 在首页或者广告展示区域，Carousel 组件可以用来轮播展示图片或者广告内容。它可以设置轮播的速度、切换效果等，吸引用户的注意力。
Cascader（级联选择）
- 当需要用户进行多级选择时，如选择省 - 市 - 区的地址信息，Cascader 组件就派上用场了。它可以清晰地展示层级关系，方便用户操作。
Checkbox（复选框）
- 在表单中，当需要用户选择多个选项时，如选择兴趣爱好或者权限设置等，Checkbox 组件是很好的选择。
Collapse（折叠面板）
- 当页面上有较多的内容需要展示，但又不想一次性全部显示时，可以使用 Collapse 组件。例如，在产品详情页面，有详细的产品参数、使用说明等内容，使用折叠面板可以让页面更加简洁，用户可以根据自己的需求展开查看。
ColorPicker（颜色选择器）

在一些设计类工具或者需要用户自定义颜色的场景，如自定义主题颜色、设置文本颜色等，ColorPicker 组件能够让用户方便地选择自己想要的颜色。

Countdown（倒计时）

在促销活动页面、限时抢购场景或者验证码倒计时等情况下，Countdown 组件可以清晰地显示剩余时间，给用户一种紧迫感。

DatePicker（日期选择）

在预订酒店、机票，或者设置日程安排等场景，DatePicker 组件可以让用户方便地选择日期。

Descriptions（描述列表）

用于以列表的形式展示一些描述信息，如产品的详细规格、用户的个人信息等。

Dialog（对话框）

当需要弹出一个模态框来显示一些重要信息或者让用户进行操作确认时，如删除某个重要文件时弹出确认对话框，Dialog 组件就可以满足需求。

Divider（分割线）

在页面布局中，用于分割不同的内容区域，使页面结构更加清晰。

Drawer（抽屉）

类似于 Dialog，但它是从侧边滑出的形式。在一些需要展示更多操作或者详细信息的场景，如在手机端的菜单或者设置页面，可以使用 Drawer 组件。

Ellipsis（文本省略）

当文本内容过长，在有限的空间内无法完全显示时，Ellipsis 组件可以将文本进行省略显示，并且可以设置鼠标悬停时显示完整内容等效果。

Empty（空状态）

当某个区域没有数据时，如在搜索结果为空或者列表为空的情况下，Empty 组件可以显示一些提示信息和图标，告知用户没有找到相关内容。

Flex（弹性布局）

在进行页面布局时，Flex 组件可以根据不同的屏幕尺寸和布局需求，灵活地调整元素的排列方式和比例关系。

FloatButton（浮动按钮）

在一些页面中，如手机端的应用，可能会有一些常用的操作按钮，如快速回到顶部、添加新内容等，FloatButton 可以以浮动的形式显示在页面上，方便用户操作。

GradientText（渐变文字）

在一些需要突出显示文字的场景，如标题或者重要提示信息，可以使用 GradientText 组件来实现渐变的文字效果，增加视觉吸引力。

Grid（栅格）

在页面布局中，Grid 组件可以将页面划分为规则的网格，方便进行元素的排列和布局，常用于展示图片、商品等内容。

Image（图片）

用于在页面上显示图片，可以设置图片的大小、加载方式、懒加载等属性，满足不同的图片展示需求。

Input（输入框）

在各种表单场景中，如登录、注册、搜索等，Input 组件是必不可少的，它可以接受用户的输入内容。

InputNumber（数字输入框）

当需要用户输入数字时，如输入商品数量、年龄等，InputNumber 组件可以限制输入内容为数字，并且可以设置数字的范围、步长等属性。

InputSearch（搜索框）

专门用于搜索功能的输入框，通常会和搜索按钮或者自动搜索功能配合使用。

List（列表）

在展示多个数据项时，如新闻列表、商品列表等，List 组件可以以列表的形式展示数据，并且可以设置列表项的样式、排序等。

LoadingBar（加载条）

在页面加载数据或者进行异步操作时，LoadingBar 组件可以显示加载的进度，让用户知道操作正在进行中。

Message（全局提示）

当需要在页面上显示一些全局的提示信息，如操作成功或者失败的提示，Message 组件可以在页面的某个固定位置显示这些信息。

Modal（模态框）

类似于 Dialog，用于在页面上弹出一个模态的窗口，显示一些重要信息或者进行操作确认等。

Notification（通知提醒）

在有新消息、提醒或者警告等情况时，Notification 组件可以以通知的形式显示在页面的某个角落或者在系统通知栏中。

NumberAnimation（数值动画）

在需要展示数值变化的场景，如统计数据的增长、计数器等，NumberAnimation 组件可以以动画的形式展示数值的变化过程，增加视觉效果。

Pagination（分页）

当数据量较大，需要分页展示时，如在商品列表或者搜索结果页面，Pagination 组件可以方便地实现分页功能，用户可以切换不同的页码查看数据。

Popconfirm（弹出确认）

类似于 Dialog 和 Popover 的结合，当用户进行某个操作时，如删除操作，会弹出一个确认框，并且可以在确认框中显示一些提示信息。

Popover（气泡卡片）

在鼠标悬停或者点击某个元素时，弹出一个气泡卡片，显示一些相关的信息或者操作按钮，如在地图上悬停在某个地点时，弹出气泡卡片显示该地的详细信息。

Progress（进度条）

用于显示某个操作或者任务的进度，如文件上传、下载进度等。

QRCode（二维码）

在需要展示二维码的场景，如支付页面、产品推广页面等，QRCode 组件可以方便地生成和显示二维码。

Radio（单选框）

在表单中，当需要用户从多个选项中选择一个时，如选择性别、会员等级等，Radio 组件是合适的选择。

Rate（评分）

在产品评价、用户满意度调查等场景，Rate 组件可以让用户方便地进行评分操作。

Result（结果）

在完成某个操作后，如支付成功、注册成功等，Result 组件可以显示操作的结果信息。

Scrollbar（滚动条）

当页面内容超出容器范围时，Scrollbar 组件可以提供自定义的滚动条样式，并且可以设置滚动的速度、滚动条的显示方式等。

Segmented（分段控制器）

在一些需要用户在几个固定选项中进行切换的场景，如切换不同的视图模式、不同的分类等，Segmented 组件可以实现这种分段控制的功能。

Select（选择器）

在表单或者下拉菜单场景中，Select 组件可以让用户从多个选项中选择一个或者多个，并且可以设置选项的样式、搜索功能等。

Skeleton（骨架屏）

在页面加载数据之前，Skeleton 组件可以显示一个类似骨架的占位符，让用户知道页面正在加载内容，而不是一片空白。

Slider（滑动输入条）

在需要用户通过滑动来调整数值或者选择范围的场景，如调整音量、亮度等，Slider 组件可以满足需求。

Space（间距）

总结

Vue-Amazing-Ui是一款具有特色的Vue组件库，提供了丰富的组件和强大的自定义能力。无论是企业级项目还是个人项目，Vue-Amazing-Ui都能满足你的需求。如果你正在寻找一款简洁、易用的Vue组件库，那么Vue-Amazing-Ui绝对值得尝试。

项目地址

https://github.com/themusecatcher/vue-amazing-ui