Vue Amazing UI 组件库（Vue3+TypeScript+Vite 等最新技术栈开发）

theMuseCatcher
2,182 阅读5分钟

image.png

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.3 + Vite@6.1.0 + Less@4.2.2 实现
  • 目前共包含 65 个基础 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>

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

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

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

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

使用 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 VueAmazingUI
        VueAmazingUIResolver({
          cjs: false // whether use commonjs build, default false
        })
      ]
    })
  ]
})

然后，你可以在代码中直接使用 vue-amazing-ui 的所有组件

<template>
  <Button>button</Button>
  <Tag>tag</Tag>
</template>

使用类型

所有类型均可直接从 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
} from 'vue-amazing-ui'
</script>

项目

  • 获取项目代码
git clone https://github.com/themusecatcher/vue-amazing-ui.git
  • 安装依赖
cd vue-amazing-ui

pnpm i
  • 启动项目
pnpm dev
  • 启动文档
pnpm  docs:dev

博客

My CSDN Blogs

赞助

Vue Amazing UI 是采用 MIT 许可的开源项目，使用完全免费。组件库及文档所有工作均由作者一人完成，开发迭代过程实属不易...为了组件库的健康可持续发展，非常期望能获得您的支持与赞助。

成为赞助者

赞助者 🫡

所有的赞助者都将出现在此处，非常感谢你们的支持与赞助 ❤️❤️

GitHub@themusecatcher WeChat@Ant GitHub@nizhensh-i

组件

名称说明名称说明
Alert警告提示Avatar头像
BackTop回到顶部Badge徽标
Breadcrumb面包屑Button按钮
Calendar日历Card卡片
Carousel轮播图Cascader级联选择
Checkbox复选框Collapse折叠面板
ColorPicker颜色选择器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下载文件并自定义文件名，未传 fileName 时，从文件地址中自动提取文件名称(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>
avatar
文章
阅读
粉丝