vue amazing ui

Vue 令人惊叹的 UI

文档

Vue 令人惊叹的 UI

特征

• 组件库使用[email protected] + [email protected] + [email protected] + [email protected]实现。

• 目前包含63基础UI组件和16实用功能，还在不断探索和更新中……

• 更重要的是，它们都是可摇树的。

• Vue Amazing UI 中的所有内容都是用 TypeScript 编写的。它可以与您的打字稿项目无缝配合。

• 所有组件均以单文件组件SFC样式构建，可以独立使用。

• 开箱即用，无需大惊小怪。

安装

pnpm add vue-amazing-ui# ornpm install vue-amazing-ui# oryarn add vue-amazing-ui# orbun add vue-amazing-ui

使用组件

全局注册所有组件（不推荐）

没有摇树。捆绑包会有冗余代码。

从'vue'导入{createApp}从'./App.vue'导入应用程序从'vue-amazing-ui'导入VueAmazingUI导入'vue-amazing-ui/css'const app = createApp(App)app.use(VueAmazingUI )app.mount('#app')

全球部分注册

在这种形式下，只有导入的组件才会被捆绑。

导入 { 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.cs​​s'const app = createApp(App)app.use(Button).use(Tag)app.mount('#app')

本地注册

在这种形式下，只有导入的组件才会被捆绑。

 <script setup lang="ts">导入 { Button, Tag } from 'vue-amazing-ui'import 'vue-amazing-ui/es/button/Button.css'import 'vue-amazing-ui/es/tag /Tag.cs​​s'</脚本>
<模板>
  <按钮>按钮</按钮>
  <标签>标签</标签>
</模板>

自动导入样式（推荐）

使用vite-plugin-style-import插件可以按需自动导入组件样式。该插件会自动解析模板中使用的组件并导入其样式。

 pnpm add vite-plugin-style-import -D# ornpm install vite-plugin-style-import -D# oryarn add vite-plugin-style-import -D# orbun add vite-plugin-style-import -D

 // vite.config.tsimport { 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 默认的defineConfig({
  plugins: [vue(),// 按需导入组件库样式createStyleImportPlugin({resolvs:[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">从 'vue-amazing-ui' 导入 { Button, Tag }</script>
  <模板>
    <按钮>按钮</按钮>
    <标签>标签</标签>
  </模板>

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

使用unplugin-vue-components插件按需自动导入组件。插件会自动解析模板中使用的组件并导入组件和样式。

 pnpm add unplugin-vue-components -D# ornpm install unplugin-vue-components -D# oryarn add unplugin-vue-components -D# orbun add unplugin-vue-components -D

 // vite.config.tsimport { DefineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import 组件 from 'unplugin-vue-components/vite'// vue-amazing-ui 按需 importimport { VueAmazingUIResolver } from 'vue-amazing-ui'// https://vitejs.dev/config/export 默认defineConfig({
  插件：[vue（），组件（{解析器：[//从VueAmazingUIVueAmazingUIResolver（）自动导入组件]}）
  ]})

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

 <模板>
  <按钮>按钮</按钮>
  <标签>标签</标签>
</模板>

使用类型

所有类型都可以直接从vue-amazing-ui导入使用，无需任何额外安装。

 <script setup lang="ts">从 'vue-amazing-ui'const shape = ref<ButtonProps['shape']>('default') 导入类型 { ButtonProps }</script>
<模板>
  <按钮：shape =“形状”>按钮</按钮>
</模板>

使用功能

<script setup lang="ts">从“vue-amazing-ui”导入{ dateFormat、formatNumber、rafTimeout、cancelRaf、throttle、debounce、add、downloadFile、toggleDark、useEventListener、useMutationObserver、useScroll、useFps、useMediaQuery、useResizeObserver、useSlotsExist} '</脚本>

项目

• 获取项目代码

git 克隆 https://github.com/themusecatcher/vue-amazing-ui.git

• 安装依赖项

cd vue-amazing-ui

PNPM我

• 运行项目

PNPM开发

博客

我的CSDN博客

成分

姓名	描述	姓名	描述
警报	警告提示	阿凡达	阿头像
返回顶部	回到顶部	徽章	形式
面包屑	面包片	按钮	按钮
卡片	反应	轮播	轮播图
级联器	等级联选择	复选框	外观
坍塌	折叠面板	倒计时	倒计时
日期选择器	日期选择	描述	描述列表
对话	对话框	分频器	分割线
抽屉	保险箱	省略	文本简洁
空的	空状态	柔性	弹性布局
浮动按钮	浮动按钮	渐变文本	变形文字
网格	格子	图像	图片
输入	输入框	输入编号	数字输入框
输入搜索	搜索框	列表	列表
加载栏	加载条	信息	全局提示
莫代尔	模态框	通知	通知提醒
数字动画	数值动画	分页	分页
弹出确认	弹出确认	弹出窗口	摆动动作
进步	详细条	二维码	二维码
收音机	单选框	速度	评分
结果	结果	滚动条	滚动条
分段式	分区控制器	选择	选择器
骨骼	骨架屏	滑块	滑动输入条
空间	尺寸	旋转	加载中
统计	统计数值	步骤	步骤条
刷卡器	触摸滑动插件	转变	开关
桌子	表格	选项卡	标签页
标签	标签	文本区	文本域
文本滚动	文字滚动	时间轴	时间轴
工具提示	文字提示	上传	上传
视频	播放器	瀑布	流瀑布
水印	水印

功能

姓名	描述	类型
日期格式	格式化日期时间字符串函数	（值：数字 | 字符串 | 日期 = Date.now()，格式：字符串 = 'YYYY-MM-DD HH:mm:ss') => 字符串
格式编号	数字格式化功能	（值：数字 | 字符串，精度：数字 = 2，分隔符：字符串 = ','，小数点：字符串 = '.'，前缀？：字符串，后缀？：字符串）=> 字符串
raf超时	使用requestAnimationFrame实现setTimeout或setInterval的函数	(fn: 函数，延迟：数字 = 0，间隔：布尔值 = false) => 对象
取消Raf	取消rafTimeout功能的函数	(raf: { id: 数字 }) => void
风门	油门功能	(fn: 函数，延迟：数量 = 300) => 任意
去抖	去抖功能	(fn: 函数，延迟：数量 = 300) => 任意
添加	消除 JavaScript 算术中精度问题的加法函数	(num1: 数字，num2: 数字) => 数字
下载文件	下载具有自定义文件名的文件的功能；如果未提供名称，则会从 URL 中提取文件名	(url: 字符串, 文件名?: 字符串) => void
切换暗	切换暗模式的功能	() => 无效
使用事件监听器	使用 Vue 生命周期挂钩添加和删除事件监听器的函数	（目标：HTMLElement | 窗口 | 文档，事件：字符串，回调：函数）=> void
使用MutationObserver	使用MutationObserver观察 DOM 元素变化的函数	（目标：Ref | Ref[] | HTMLElement | HTMLElement[]，回调：MutationCallback，选项 = {}）=> 对象
使用滚动	实时监控目标元素的滚动位置和状态的功能	（目标：Ref | HTMLElement | Window | Document = window，throttleDelay：number = 0，onScroll？：（e：Event）=> void，onStop？：（e：Event）=> void）=> object
使用帧率	实时监控浏览器刷新率（FPS）的功能	() => 对象
使用媒体查询	判断当前环境是否匹配指定媒体查询条件的函数	(mediaQuery: 字符串) => 对象
使用ResizeObserver	使用ResizeObserver观察DOM元素尺寸变化的函数	（目标：Ref | Ref[] | HTMLElement | HTMLElement[]，回调：ResizeObserverCallback，选项 = {}）=> 对象
使用槽位存在	监视给定名称的槽是否存在的函数，支持单个槽或槽数组	(slotsName: string | string[] = 'default') => 反应式 |参考<布尔值>