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​​'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​​'</腳本>
<模板>
  <按鈕>按鈕</按鈕>
  <標籤>標籤</標籤>
</模板>

自動導入樣式（建議）

使用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# 或bun 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 { VueAmazing } ' 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、toggleDark、useEventListener、useMutationObserver、useScroll、useFps、ReuseiaQueryS、Reslots、TlotSlotFps、Resotia } '</腳本>

專案

• 取得專案代碼

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

• 安裝依賴項

cd vue-amazing-ui

PNPM我

• 運行專案

PNPM開發

部落格

我的CSDN博客

成分

姓名	描述	姓名	描述
警報	警告提示	阿凡達	阿頭像
回到頂部	回到頂部	徽章	形式
麵包屑	麵包片	按鈕	按鈕
卡片	反應	輪播	輪播圖
級聯器	等級聯選擇	複選框	外觀
坍塌	折疊面板	倒數計時	倒數計時
日期選擇器	日期選擇	描述	描述列表
對話	對話框	分音器	分割線
抽屜	保險箱	省略	文字簡潔
空的	空狀態	柔性	彈性佈局
浮動按鈕	浮動按鈕	漸層文字	變形文字
網格	格子	影像	圖片
輸入	輸入框	輸入編號	數位輸入框
輸入搜尋	搜尋框	清單	清單
載入欄	載入條	訊息	全域提示
莫代爾	模態框	通知	通知提醒
數位動畫	數值動畫	分頁	分頁
彈出確認	彈出確認	彈出視窗	擺盪動作
進步	詳細條	QR 圖碼	QR 圖碼
收音機	單選框	速度	評分
結果	結果	捲軸	捲軸
分段式	分區控制器	選擇	選擇器
骨骼	骨架螢幕	滑桿	滑動輸入條
空間	尺寸	旋轉	載入中
統計	統計數值	步驟	步驟條
刷卡器	觸摸滑動插件	轉變	開關
桌子	表格	選項卡	標籤頁
標籤	標籤	文字區	文字域
文字滾動	文字捲動	時間軸	時間軸
工具提示	文字提示	上傳	上傳
影片	播放器	瀑布	流瀑布
水印	水印

功能

姓名	描述	類型
日期格式	格式化日期時間字串函數	（值：數字 | 字串 | 日期 = 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') => 反應式 |參考<布林值>