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

在这里插入图片描述

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 实现的 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下载文件并自定义文件名,未传 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/66380.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git:指令集

以下是对这些 Git 新特性和命令的更详细解读和实际用例分析&#xff0c;帮助更好地理解它们的作用及适用场景&#xff1a; 1. git switch 和 git restore 背景&#xff1a; 传统上&#xff0c;git checkout 是一个多功能命令&#xff0c;用于切换分支、检出文件、创建分支等&…

C语言----指针

目录 1.概念 2.格式 3.指针操作符 4.初始化 1. 将普通变量的地址赋值给指针变量 a. 将数组的首地址赋值给指针变量 b. 将指针变量里面保存的地址赋值给另一个指针变量 5.指针运算 5.1算术运算 5.2 关系运算 指针的大小 总结&#xff1a; 段错误 指针修饰 1. con…

ElasticSearch系列(一)

一.了解ES、倒排索引、es的一些概念、安装es、kibana 二.DSL&#xff1b;索引库操作 三.Java RestClient&#xff1a;索引库操作 一、了解ES、倒排索引、es的一些概念、安装es、kibana kibana、logstash、beats Elasticserach 存储&#xff0c;计算 &#xff0c;搜索数据 –…

Python应用——将Matplotlib图形嵌入Tkinter窗口

Python应用——将Matplotlib图形嵌入Tkinter窗口 目录 Python应用——将Matplotlib图形嵌入Tkinter窗口1 模块简介2 示例代码2.1 Matplotlib嵌入Tkinter2.2 Matplotlib嵌入Tkinter并显示工具栏 1 模块简介 Tkinter是Python的标准GUI&#xff08;图形用户界面&#xff09;库&…

C#语言的网络编程

C#语言的网络编程 引言 随着互联网的飞速发展&#xff0c;网络编程成为了软件开发中的一个重要领域。C#语言作为一种现代编程语言&#xff0c;凭借其丰富的类库、良好的可读性和强大的功能&#xff0c;广泛应用于开发各种网络应用程序。无论是Windows应用、Web应用还是云服务…

软件工程大复习之(四)——面向对象与UML

4.1 面向对象概述 面向对象&#xff08;OO&#xff09;是一种编程范式&#xff0c;它将数据和处理数据的方法封装在对象中。面向对象的主要概念包括&#xff1a; 对象&#xff1a;实例化的数据和方法的集合。类&#xff1a;对象的蓝图或模板。封装&#xff1a;隐藏对象的内部…

【linux基础I/O(2)】理解文件系统|文件缓冲区|软硬链接|动静态库

目录 前言1. 理解C语言的缓冲区2. 对文件系统的初认识3. 理解软硬链接1. 软硬链接的特征2.软硬链接的作用 4. 理解动静态库5. 总结 前言 对于文件来讲,有打开的在内存中的文件,也有没有打开的在磁盘上文件,上一篇文章讲解的是前者,本篇文章将带大家了解后者! 本章重点: 本篇文…

什么是Redis的渐进式ReHash?

文章内容收录到个人网站&#xff0c;方便阅读&#xff1a;http://hardyfish.top/ 文章内容收录到个人网站&#xff0c;方便阅读&#xff1a;http://hardyfish.top/ 文章内容收录到个人网站&#xff0c;方便阅读&#xff1a;http://hardyfish.top/ Redis 的渐进式 rehash 是一…

Linux应用软件编程--网络通信(udp协议,tcp协议)

网络通信&#xff1a;不同主机&#xff0c;进程间通信&#xff0c;分为广域网和局域网 OSI 七层模型&#xff1a;是一种理论模型 应用层&#xff1a;通信传输的数据内容 http、FTP、TFTP、MQTT 表述层&#xff1a;数据加密&#xff0c;解密操作&#xff0c;压缩&#xff…

深度学习,训练集准确率高,但验证集准确率一直不上升,很低的问题

在训练过程中&#xff0c;训练集的准确率稳步上升&#xff0c;但是验证集的准确率一直在40%左右徘徊&#xff0c;从网上搜索可能的原因有&#xff1a; 1、学习率太小&#xff0c;陷入局部最优。 2、数据量太小&#xff08;4000多条数据&#xff0c;应该还可以吧&#xff09; …

【C++】构造函数与析构函数

写在前面 构造函数与析构函数都是属于类的默认成员函数&#xff01; 默认成员函数是程序猿不显示声明定义&#xff0c;编译器会中生成。 构造函数和析构函数的知识需要建立在有初步类与对象的基础之上的&#xff0c;关于类与对象不才在前面笔记中有详细的介绍&#xff1a;点我…

期刊选择【生物医学工程】

所有数据来源letpub Academic radiology【共一共通&#xff0c;速度√杠杠的】 【LetPub】ACADEMIC RADIOLOGY 影响因子3.800分&#xff0c;是几区&#xff0c;2023-2024年期刊投稿经验分享&#xff0c;ACADEMIC RADIOLOGY主页&#xff0c;推荐审稿人、编辑&#xff0c;审稿…

【简博士统计学习方法】3. 统计学习方法的三要素

3. 统计学习方法的三要素 3.1 监督学习的三要素 3.1.1 模型 假设空间&#xff08;Hypothesis Space&#xff09;&#xff1a;所有可能的条件概率分布或决策函数&#xff0c;用 F \mathcal{F} F表示。 若定义为决策函数的集合&#xff1a; F { f ∣ Y f ( X ) } \mathcal{F…

Flink如何设置合理的并行度

一个Flink程序由多个Operator组成(source、transformation和 sink)。 一个Operator由多个并行的Task(线程)来执行, 一个Operator的并行Task(线程)数目就被称为该Operator(任务)的并行度(Parallel)。即并行度就是相对于Operator来说的。 合理设置并行度可以有效提高Flink作业…

【PostgreSQL】PG多实例部署

注释 PGPORT 和 PGDATA 环境变量 su - postgresvim ~/.bash_profileexport PATH=/usr/local/pgsql/bin:$PATH export MANPATH=/usr/local/pgsql/share/man:$MANPATH export LD_LIBRARY_PATH=/usr/local/pgsql/lib #export PGPORT=5432 export LANG=en_US.UTF8 export PS1=&quo…

【llm/ollama/qwen】在本地部署qwen2.5-coder并在vscode中集成使用代码提示功能

说在前面 操作系统&#xff1a;windows11ollama版本&#xff1a;0.5.4vscode版本&#xff1a;1.96.2continue插件版本&#xff1a;0.8.66 ollama安装 访问官网&#xff0c;点击下载安装即可 默认装在了C盘&#xff0c;比较蛋疼&#xff1b;但是可以指定路径安装&#xff1a;Ol…

PHP零基础入门笔记

表达式&#xff1a;任何有值的东西就是表达式 php可以解析双引号&#xff0c;不可以解析单引号&#xff0c;双引号中引用变量可以输出引用变量的值&#xff0c;但是单引号不可以 1.变量和变量的销毁 unset(变量名) //销毁变量 变量是严格区分大小写的&#xff0c;在php中…

《CPython Internals》阅读笔记:p1-p19

《CPython Internals》学习第 1 天&#xff0c;p1-p19 总结&#xff0c;总计 19 页。 一、技术总结 无。 二、英语总结(生词&#xff1a;2) 1.humble vs humbled (1)humble: humus(“earth”) adj. 字面意思是“on the ground”, 后面引申为“lowly in kind, state, cond…

macos安装java8

下载 dmg方式安装 安装 双击pkg运行 输入java -version验证 配置环境变量 cd ~ ls -a输入 ls -a后查看是否已经存在.bash_profile文件&#xff0c;如果已经存在就不需要创建&#xff0c;如果不存在&#xff0c;继续执行下方命令创建文件 touch .bash_profile /usr/l…

自定义校验注解

已有的注解不能满足所有的校验需求,特殊的情况需要自定义校验(自定义校验注解) 1.自定义注解,并在注解上指定校验逻辑 Constraint(validatedBy StateValidation.class) // 指定校验逻辑 package com.example.demo.validation;import jakarta.validation.Constraint; import j…