ホームページ > 記事 > ウェブフロントエンド > 共有する 17 個の Vue3 実践 UI コンポーネントライブラリ (Web + モバイル)

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

青灯夜游オリジナル: 2022-10-19 11:09:3411459ブラウズ

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/

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

##2. Vue の Ant Design

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

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

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

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/

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

特徴:

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 コミュニティでオープンソース化されています。以下を推奨します。無料のオープンソースを愛するすべての人。共有する 17 個の Vue3 実践 UI コンポーネントライブラリ (Web + モバイル)

機能:

豊富で完全なコンポーネント、一般的に使用される 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 の設計および開発の学生によって構築および保守されています。

#ハイライト:

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

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

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

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

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

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

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

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

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

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

##9.PrimeVue

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

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

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

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

10. DevUI

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

共有する 17 個の Vue3 実践 UI コンポーネントライブラリ (Web + モバイル) 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 機能です。

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

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

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

構成ファイルと CSS 変数を介したコンポーネントのグローバル構成をサポート
組み込みの 2 セットのカラーテーマスキーム
ツリーシェーキングの最適化をサポートし、パッケージングボリュームを削減します
i18n 国際化をサポート
IE 以外のブラウザと互換性あり

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

13. View UI Plus

Vue.js 3

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

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

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

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

14. Vant

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

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

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

特長

##優れたパフォーマンス、平均コンポーネントサイズは 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/#/

共有する 17 個の Vue3 実践 UI コンポーネントライブラリ (Web + モバイル) ##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

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

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

中国人によって開発され、完全な中国語/英語ドキュメントを提供します
#オンデマンドの導入とテーマのカスタマイズをサポート、ダークモードをサポート
##国際化をサポート
サポートウェブストーム、vscode エディターのコンポーネント属性の強調表示
#SSR サーバー側レンダリングのサポート
Typescript のサポート
90% 以上の単体テストカバレッジを確保
17.nutui-bingo
By 宝くじコンポーネントライブラリベースJD NutUI フロントエンドチームによって作成された NutUI Vue 3 上で、マーケティング活動やミニゲームシナリオ用の宝くじゲームプレイを迅速に開発するために使用されます。