vue amazing ui

Vueの素晴らしいUI

ドキュメント

Vueの素晴らしいUI

特徴

• コンポーネント ライブラリは[email protected] + [email protected] + [email protected] + [email protected]で実装されています。

• 現在、 63基本的な UI コンポーネントと16ユーティリティ関数が含まれており、継続的な探索と更新が継続されています。

• さらに、それらはすべてツリーシェイク可能です。

• Vue Amazing UI のすべての要素は TypeScript で書かれています。 TypeScript プロジェクトとシームレスに連携できます。

• すべてのコンポーネントは単一ファイル コンポーネントSFCスタイルで構築されており、独立して使用できます。

• 箱から出してすぐに使用できます。

インストール

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

コンポーネントを使用する

すべてのコンポーネントのグローバル登録 (非推奨)

木の揺れもありません。バンドルには冗長コードが含まれます。

 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.cs​​s'const app = createApp(アプリ)app.use(ボタン).use(タグ)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 /タグ.css'</script>
<テンプレート>
  <ボタン>ボタン</ボタン>
  <タグ>タグ</タグ>
</テンプレート>

自動インポートスタイル (推奨)

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'// コンポーネント stylesimport { VueAmazingUIStyleResolve } from 'を自動的にインポートしますvue-amazing-ui'// https://vitejs.dev/config/export デフォルトdefineConfig({
  plugins: [vue(),// 要求に応じてコンポーネント ライブラリ スタイルをインポートしますcreateStyleImportPlugin({solves:[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」から { ボタン、タグ } をインポート</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 'unplugin-vue-components/vite' からのコンポーネント// vue-amazing-ui オンデマンド importimport { VueAmazingUIResolver } 'vue-amazing-ui' から// https://vitejs.dev/config/exportデフォルトのdefineConfig({
  plugins: [vue(),Components({solvers: [// VueAmazingUIVueAmazingUIResolver() からコンポーネントを自動インポート ]})
  ]})

その後、 vue-amazing-uiのすべてのコンポーネントをコード内で直接使用できます。

 <テンプレート>
  <ボタン>ボタン</ボタン>
  <タグ>タグ</タグ>
</テンプレート>

使用タイプ

すべてのタイプは、追加のインストールなしでvue-amazing-uiから直接インポートして使用できます。

 <script setup lang="ts">インポート タイプ { ButtonProps } から 'vue-amazing-ui'constshape = ref<ButtonProps['shape']>('default')</script>
<テンプレート>
  <ボタン :shape="shape">ボタン</Button>
</テンプレート>

関数を使用する

<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私

• プロジェクトの実行

pnpm開発

ブログ

私の CSDN ブログ

コンポーネント

名前	説明	名前	説明
アラート	警告の提案	アバター	画像
戻るトップへ	顶部に戻る	バッジ	徽标
ブレッドクラム	面包チップ	ボタン	按钮
カード	卡片	カルーセル	轮播图
カスケダー	级联选择	チェックボックス	复选框
崩壊	折板	カウントダウン	倒した時間
日付ピッカー	日期選択	説明	説明列表
ダイアログ	对话框	ディバイダー	分割線
引き出し	抽屉	省略記号	文本省略
空の	空状态	フレックス	弹性布局
フロートボタン	浮動按钮	グラデーションテキスト	渐变文字
グリッド	栅格	画像	写真
入力	输入框	入力番号	数字入力
入力検索	搜索框	リスト	列表
ローディングバー	追加条	メッセージ	全体的な提案
モーダル	模态框	通知	通知喚起
数字アニメーション	数值アニメーション画	ページネーション	分页
ポップコンファーム	弹出确认	ポップオーバー	泡泡卡写真
進捗	度条	QRコード	二维コード
無線	单选框	レート	评分
結果	結果	スクロールバー	滚動条
セグメント化された	分別制御装置	選択	選択器
スケルトン	骨架屏風	スライダー	滑動输入条
空間	ピッチ	スピン	追加ダウンロード中
統計	数值	ステップ	步骤条
スワイパー	触摸滑動插件	スイッチ	开关
テーブル	表格	タブ	标签页
タグ	标签	テキストエリア	文メインフィールド
テキストスクロール	文字滚動	タイムライン	時間
ツールチップ	文字のヒント	アップロード	上传
ビデオ	播放器	滝	瀑布流
透かし	水印

機能

名前	説明	タイプ
日付形式	日付時刻文字列関数の書式設定	(値: 数値 | 文字列 | 日付 = Date.now()、形式: 文字列 = 'YYYY-MM-DD HH:mm:ss') => 文字列
形式番号	数値フォーマット関数	(値: 数値 | 文字列、精度: 数値 = 2、区切り文字: 文字列 = ','、10 進数: 文字列 = '.'、接頭辞?: 文字列、接尾辞?: 文字列) => 文字列
rafタイムアウト	requestAnimationFrameを使用してsetTimeoutまたはsetIntervalを実装する関数	(fn: 関数、遅延: 数値 = 0、間隔: ブール値 = false) => オブジェクト
キャンセルRaf	rafTimeout関数をキャンセルする関数	(raf: { id: 番号 }) => 無効
スロットル	スロットル機能	(fn: 関数、遅延: 数値 = 300) => 任意
デバウンス	デバウンス機能	(fn: 関数、遅延: 数値 = 300) => 任意
追加	JavaScript 算術演算の精度の問題を解決する加算関数	(num1: 数値、num2: 数値) => 数値
ダウンロードファイル	カスタムファイル名でファイルをダウンロードする機能。名前が指定されていない場合は、URL からファイル名が抽出されます。	(url: 文字列、ファイル名?: 文字列) => void
トグルダーク	ダークモードを切り替える機能	() => 無効
useEventListener	Vueライフサイクルフックを使用してイベントリスナーを追加および削除する機能	(ターゲット: HTMLElement | ウィンドウ | ドキュメント、イベント: 文字列、コールバック: 関数) => void
ミューテーションオブザーバーを使用する	MutationObserver利用してDOM要素の変化を観察する機能	(ターゲット: Ref | Ref[] | HTMLElement | HTMLElement[]、コールバック: MutationCallback、オプション = {}) => オブジェクト
useScroll	対象要素のスクロール位置と状態をリアルタイムに監視する機能	(ターゲット: Ref | HTMLElement | Window | Document = window, throttleDelay:number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => オブジェクト
Fps を使用する	ブラウザのリフレッシュレート(FPS)をリアルタイムに監視する機能	() => オブジェクト
useMediaQuery	現在の環境が指定されたメディアクエリ条件に一致するかどうかを判断する機能	(mediaQuery: 文字列) => オブジェクト
useResizeObserver	ResizeObserver使用してDOM要素の寸法の変化を観察する機能	(ターゲット: Ref | Ref[] | HTMLElement | HTMLElement[]、コールバック: ResizeObserverCallback、オプション = {}) => オブジェクト
useSlotsExist	指定された名前のスロットの存在を監視する関数。単一のスロットまたはスロットの配列をサポートします。	(スロット名: 文字列 | 文字列[] = 'デフォルト') => リアクティブ | Ref<ブール値>