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

简介: Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。

8586a1f72c1b44959eb2bcd9f9be9329.png

Vue Amazing UI

一个 Vue 3 组件库


使用 TypeScript,都是单文件组件 (SFC),支持 tree shaking


有点意思


English | 中文

Vue Amazing UI 是一个基于 Vue 3TypeScriptVite 等最新技术栈开发构建的现代化组件库,包含丰富的 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 实现的 setTimeoutsetInterval 调用函数 (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\
相关文章
|
4月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
118 4
|
4月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
175 1
|
21天前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
240 0
|
3月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
318 12
|
4月前
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
4月前
|
自然语言处理 JavaScript 前端开发
一夜获千星!已获 1.7k+,Art Design Pro:Vue3 + Vite + TypeScript 打造的高颜值管理系统模板,这个让后端小哥直呼救命的后台系统
Art Design Pro 是一款基于 Vue 3、Vite 和 TypeScript 的高颜值后台管理系统模板,已获 1.7k+ 星标。项目专注于用户体验与视觉设计,支持主题切换、多语言、权限管理及图表展示等功能,内置常用业务组件,便于快速搭建现代化管理界面。其技术栈先进,开发体验流畅,适配多设备,满足企业级应用需求。项目地址:[GitHub](https://github.com/Daymychen/art-design-pro)。
558 11
|
5月前
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
210 22
|
8月前
|
人工智能 自然语言处理 前端开发
Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型,能够将 UI 设计图转换为高质量的现代前端代码,支持 React 等主流框架,具备动态交互、组件化开发等功能,显著提升前端开发效率。
878 1
|
7月前
|
安全 API 开发者
深入探索ArkUI中的@LocalBuilder装饰器:构建高效可维护的UI组件
在ArkUI框架中,组件化开发至关重要。@LocalBuilder作为自API version 12引入的装饰器,专注于组件内部私有构建,确保封装性与安全性。本文解析其工作原理、参数传递机制及与@Builder的区别,结合典型场景代码示例,助开发者掌握这一工具。通过状态驱动UI更新、复杂组件组合等实践,优化性能并提升代码可维护性,推动高效UI架构构建。
169 0
|
5月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
165 15