共有する 17 個の Vue3 実践 UI コンポーネント ライブラリ (Web + モバイル)

Vue3 が正式にリリースされてからほぼ 2 年が経ちました。今年 2 月に、Vue3 が正式に Vue プロジェクトのデフォルト バージョンになりました。すべての主要なコンポーネント ライブラリとフレームワークが Vue 3 をサポートし、最適化されました。この記事では、Vue 3 を共有します。 Web UI ライブラリやモバイル UI ライブラリを含む 17 個の Vue3 実践的な UI コンポーネント ライブラリが皆様のお役に立てば幸いです。

1. Web UI ライブラリ

1. ElementUI Plus

開発者向けセット、デザイナーとプロダクト マネージャーによって作成された Vue 3.0 に基づくデスクトップ コンポーネント ライブラリ。 (学習ビデオ共有: vuejs チュートリアル)

公式アドレス: https://element-plus.org/zh-CN/

##2. Vue の Ant Design

Ant Design のエンタープライズ レベルのバックエンド製品向けの Vue 実装、開発、サービス

公式アドレス: https ://www.antdv.com/docs/vue/introduce-cn

Ant Design Vue は非常に成熟したフレームワークであり、Ant を使用してユーザー インターフェイスを作成するのは非常に簡単ですDesign Vue 、これらのコンポーネントは、さまざまなアイコン スタイル、フォント、黒のテーマに適応できます。 Ant Design Vue は 60 を超えるコンポーネントの改善を続けており、基本的にプロジェクトのニーズのほとんどをカバーし、コンポーネントを改善してアクセスしやすくしています。

Vue3 の Ant Design パッケージはより小さく、より軽く感じられ、SSR をサポートしています (合成 API も含まれています)。Ant Design には、データ テーブル、統計ボックス、ポップ確認、モーダル、ポップアップなどの成熟した複雑なコンポーネントがあります。

3. BalmUI

Google のマテリアル デザインに基づいており、Vue プラグインと手順に加え、シンプルなコンポーネントから高度にカスタマイズ可能なコンポーネントが付属しています。

##公式アドレス: https://next-material.balmjs.com/

BalmUI は Balm.js によって開発されたソフトウェアです。 (同様の Vue CLI のフロントエンド ワークフロー ツール) チームは、最新の Vue 3 に基づいてフロントエンド UI コンポーネント ライブラリを構築します。これはすぐに使用でき、高度にカスタマイズ可能で、デザイン スタイルは Google のマテリアル デザイン デザインに完全に従っています。非常に優れたインタラクティブエクスペリエンスUIコンポーネントライブラリです。

特徴:

エンタープライズレベルのミドルおよびバックエンド製品のインタラクティブな効果とビジュアルスタイルから抽出された、美しくエレガントな、優れた詳細エクスペリエンス
箱から出してすぐに使用できます。これは高品質の Vue コンポーネントであるだけでなく、
組み込みアイコン ライブラリを呼び出すためのパッケージ化されたプラグイン/命令/共通ツール ライブラリも多数備えています。最新のマテリアル アイコン アイコン ライブラリを統合します。
すべてのコンポーネントとプラグインは高度にカスタマイズ可能であり、個別に使用できます

4. Naive UI

Tucson Vue3 コンポーネント ライブラリ、Vue 3.0/TypeScript に基づく無料のオープン ソース フロントエンド UI コンポーネント ライブラリ、完全なドキュメント、非大規模な工場 KPI プロジェクト!

公式アドレス: https://www.naiveui.com/zh-CN/os-theme

Naive UI は、以下に基づいた比較的新しいバージョンです。現在のフロントエンド UI コンポーネント ライブラリは、Vue 3.0/TypeScript テクノロジ スタックによって開発されました。作成者は TuSimple の出身です。最初は 2 年間社内で保守および使用されていました。現在は、Github コミュニティでオープンソース化されています。以下を推奨します。無料のオープンソースを愛するすべての人。

機能:

豊富で完全なコンポーネント、一般的に使用される 70 以上のビジネス コンポーネントが、オンデマンドでの導入をサポートします。公式に提供されたテーマ エディターは面倒なless、sass、css変数、webpackローダーを使用せず、TypeScriptによって構築された高度なタイプセーフテーマシステムを使用します

• 高速に実行され、コンパクトです軽量で、スタイルに合わせて特に最適化されており、すべてのコンポーネントはツリーシェイク [1] でき、コンポーネントが適切に動作するために CSS をインポートする必要はありません。
• 5. arco.design

ByteDance エンタープライズ レベルの製品設計システムは、React と Vue のデュアル バージョンをサポート

公式アドレス: https://arco.design/

ArcoDesign は、ByteDance 内の Byte Design に基づいてアップグレードされています。3 年近くの磨きをかけ、Byte 内での大量のビジネスの沈殿と検証を経て、「」で成功裡に開催されました。ナゲッツが主催する「レアアース開発者カンファレンス」。2021 年にオープンソース化され、これは単なる UI コンポーネント ライブラリではなく、包括的なエンタープライズ レベルの製品設計システムです。

ArcoDesign は主に、製品設計と開発をシームレスに接続して、ミドルエンドおよびバックエンド アプリケーションを構築する際の品質と効率を向上させるという問題を解決します。現在、ArcoDesign は主に ByteDance のミッドエンドおよびバックエンド製品のエクスペリエンス設計と技術実装を担当しており、主に UED の設計および開発の学生によって構築および保守されています。

#ハイライト:

# 製品設計、UI 設計、開発後をカバーする体系的かつ包括的な設計仕様とリソースを提供します
React と Vue の同期のサポート。 React と Vue の 2 セットの UI コンポーネント ライブラリも提供されます。 Vue コンポーネント ライブラリは、Vue 3.0 に基づいて開発されています。
ダーク モードのワンクリック アクティベーションとシームレスな切り替えをサポートします。
ベスト プラクティスを提供します。Arco Proでは、ユーザーがプロジェクトを迅速に初期化し、ページ テンプレートを使用してミッドエンドおよびバックエンド アプリケーションを 0 から 1

6 まで構築できるように、整理された一般的なページ シナリオが特定されています。 Quasar高性能かつ高品質の Vue.js 3 ユーザー インターフェイスを簡単に構築でき、使いやすいですが、中国語のドキュメントはありません

公式アドレス: https: //quasar.dev/

Quasar は、Vue ユーザー インターフェイス (SPA、PWA、SSR、モバイル、デスクトップ) の構築を支援する、パフォーマンスを重視した完全なフレームワークです。 Vue、Node、Webpack、Quasar へ また、Cordova、Capacitor、Electron も含まれており、個別に学習することなくデスクトップとモバイルのエクスペリエンスを構築するのに役立ちます。

7. iDUXVue3.x UI コンポーネント ライブラリ、完全に TypeScript を使用して開発されました

公式アドレス: https: / /idux.site/

8.TDesign
Tencent ビジネス チームは、ビジネスプロセスに蓄積されたエンタープライズレベルの設計システム

正式アドレス: https://tdesign.tencent.com/

開発ドキュメント: https://tdesign.tencent.com/vue - next/overview

##9.PrimeVue

##使いやすく、多機能、高-パフォーマンス Vue UI コンポーネント ライブラリ
公式アドレス: https://www.primefaces.org/primevue/

Vue 3 に基づく、無料のオープンソースで高度にカスタマイズ可能なフロントエンド UI コンポーネント ライブラリ, from 海外の優れたフロントエンド UI コンポーネント ライブラリは非常にユニークで、勉強して始める価値があります。

PrimeVue は、Vue 3 の Web UI コンポーネント ライブラリをサポートする非常に優れた Vue UI コンポーネント ライブラリで、豊富なコンポーネント、強力なカスタマイズ、明確な公式 Web サイトのドキュメント、コード サンプルが含まれています。これだけあれば十分、中国文化もあり、使い勝手の良いVueコンポーネントライブラリです。

10. DevUI

Vue3 および DevUI に基づいて設計された Huawei の UI コンポーネント公式アドレス: https://vue -devui.github.io/

11.vuestic-ui

無料のオープンソース UIライブラリ、UI は非常に美しく、バックエンド管理インターフェイスが利用可能です。 公式アドレス: https://vuestic.dev/

Vuestic UI は、Epicmax チームによって開発された Vue.js に基づく Web 開発コンポーネント ライブラリのセットです。は、Vue.js の専門知識を活用して、非常に使いやすく包括的なオープン ソース ツールを構築することを期待して、Vue3 バージョンをリリースしました。 Vuestic UI は、リリース後すぐに、Vue で構築された最も人気のあるコンポーネント ライブラリの 1 つになりました。

Vuestic UI チーム Epicmax は、世界でトップ 15 に入る Vue.js 開発チームの 1 つです。レスポンシブ デザインにより、これらのコンポーネントは Web PC プロジェクトだけでなく、ほぼすべての画面サイズの解像度でも動作します。キーボード ユーザビリティは、フレームワーク全体でシームレスなキーボード サポートを提供する Vuestic 機能です。

#技術的特徴:

#Vue3 と互換性があり、52 個の美しい応答コンポーネントを内蔵し、豊富な機能を備えています

##一般的なコンポーネント ライブラリでは珍しいキーボード ナビゲーションとスムーズなエクスペリエンスをサポート

• 構成ファイルと CSS 変数を介したコンポーネントのグローバル構成をサポート

• 組み込みの 2 セットのカラー テーマ スキーム

• ツリー シェーキングの最適化をサポートし、パッケージング ボリュームを削減します

• i18n 国際化をサポート

• IE 以外のブラウザと互換性あり

12. ヘッドレス UI
完全にTailwind CSS と完全に統合するように設計された、スタイルレスで完全にアクセス可能な UI コンポーネント。

公式アドレス: https://headlessui.com/

13. View UI Plus

Vue.js 3

公式に基づくエンタープライズ レベルの UI コンポーネント ライブラリとフロントエンド ソリューションアドレス: https://www.iviewui.com/

View UI Plus は、View Design デザイン システムの Vue.js 3 に基づく UI コンポーネント ライブラリのセットです。主にエンタープライズレベルのミッドエンドおよびバックエンドシステムで使用されます。

2. モバイル UI ライブラリ

14. Vant

Vant は、2017 年にオープンソース化された軽量で信頼性の高いモバイル コンポーネント ライブラリです。

正式アドレス: https://vant-contrib.gitee.io/vant/#/zh-CN/

特長

• ##優れたパフォーマンス、平均コンポーネント サイズは 1KB (min gzip) 未満です

• 70 個の高品質コンポーネントで、主流のモバイル シナリオをカバーします

• 外部依存関係がなく、サードパーティの npm パッケージに依存しない

• TypeScript で記述され、完全な型定義を提供します

• 単体テスト カバレッジが 90% を超え、安定性が保証されます

• 豊富な中国語と英語のドキュメントとコンポーネントの例を提供します

• Sketch And を提供しますAxure 設計リソース

• Vue 2、Vue 3、WeChat アプレットのサポート

• テーマのカスタマイズのサポート、700 個の組み込みテーマ変数

• オンデマンド導入とツリー シェイキングのサポート

• アクセシビリティのサポート (継続的な改善中)

• ダーク モードのサポート(Vant 4 以降でサポート)

• サーバー側レンダリングをサポート

• 国際化をサポート、20 の言語パックが組み込まれています

15. NutUI

NutUI は、モバイル Web インターフェイスのエンタープライズ グレードの製品を開発および提供する、JD スタイルの Vue モバイル コンポーネント ライブラリです。

#公式アドレス: https://nutui.jd.com/#/

##NutUI 3.0 新バージョンの機能

70 個の高品質コンポーネント (旧バージョンより 20 個増加)

• JD APP 9.0 のビジュアル仕様に基づいています (旧バージョンは JD APP 7.0 に基づいています) )

• オンデマンド引用もサポート

• より詳細なドキュメントと例

• TypeScript をサポート

• サーバー側レンダリングのサポート (SEO ニーズに優しい)

• カスタマイズされたテーマのサポート

• 単体テストのカバレッジ

16. Varlet

#非常に完全なドキュメントを備えたマテリアル スタイルのモバイル コンポーネント ライブラリ。 You Yuxi が推奨しており、注目に値します。

公式アドレス: https://varlet.gitee.io/varlet-ui/#/zh-CN/home

Varlet Technology機能:

50 の高品質で軽量な共通コンポーネントを提供します

• 中国人によって開発され、完全な中国語/英語ドキュメントを提供します

• #オンデマンドの導入とテーマのカスタマイズをサポート、ダーク モードをサポート

• ##国際化をサポート

  サポートウェブストーム、vscode エディターのコンポーネント属性の強調表示

• #SSR サーバー側レンダリングのサポート

• Typescript のサポート

• 90% 以上の単体テスト カバレッジを確保

• 17.nutui-bingo

• By 宝くじコンポーネント ライブラリ ベースJD NutUI フロントエンド チームによって作成された NutUI Vue 3 上で、マーケティング活動やミニゲーム シナリオ用の宝くじゲームプレイを迅速に開発するために使用されます。
#公式アドレス: https://nutui.jd.com/bingo/#/

宝くじコンポーネントの技術的特徴

合計 12 個の宝くじコンポーネントが含まれています

UI デザインは JD APP 10.0 のビジュアル仕様に基づいています

公式サイトあり 詳細なドキュメントと豊富なコード例
Vue 3.0ベース、TypeScriptにも対応、オンデマンドでの導入もサポート
便利柔軟なカスタム設定
#12 の一般的な宝くじコンポーネントをカバー
• TurnTable Big Roulette Lotery

マーキー マーキー ロト

SquareNine 9 パネル ロト

• スクラッチカード スクラッチ カード ロト

• ギフトボックス 謎のギフトボックス

• ロトロール抽選機

• ハイテッグス金の卵スマッシュ

• GiftRain レッドパケットレイン

• LuckShake Shake

• DollMachine Claw Machine

• ShakeDice ShakeDice

• Guess Gift あなたがそれを隠すと、私は推測します

(学習ビデオの共有: Web フロントエンド開発, プログラミング入門)

以上が共有する 17 個の Vue3 実践 UI コンポーネント ライブラリ (Web + モバイル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。