トップ 10 の Vue UI コンポーネントライブラリとフレームワーク |シゴソフト

2021 年に検討すべきトップ Vue UI コンポーネントライブラリとフレームワーク

Vue JS は、シングルページアプリケーション (SPA) およびユーザーインターフェイスの開発に使用されるプログレッシブ JavaScript フレームワークです。これは、最も広く使用されているフロントエンドフレームワークの 1 つです。

Vue の興味深い機能の 1 つは、Web ページをさまざまなコンポーネントに分割できることです。そして、このプロセスは UI コンポーネントライブラリを使用することでより簡単になります。

コンポーネントを簡単かつ迅速に作成するのに役立つさまざまな UI コンポーネントライブラリがあります。そこでこのブログでは、10 年の Vue UI コンポーネントライブラリのトップ 2021 をレビューします。

1.プライムビュー

PrimeVue は、使いやすく、多用途で、パフォーマンスに優れた Vue UI コンポーネントライブラリであり、素晴らしいユーザーインターフェイスの構築に役立ちます。

Web コンテンツアクセシビリティガイドライン (WCAG) とレスポンシブデザインを完全にサポートする 80 以上の UI コンポーネントがあります。最近のアップデートのおかげで、ライブラリは Vue 3 を完全にサポートするようになりました。また、より多くのコンポーネントも追加されました。

Primevue の最も優れている点の 1 つは、その幅広いコンポーネントです。これらは、テーブルやページネータから、インタラクティブな Vue アプリの作成に使用できる、巧妙に作成されたグラフベースの組織図まで多岐にわたります。これはオープンソースであり、Github では 6,983 以上のスターを獲得し、NPM では毎週 XNUMX 回ダウンロードされています。

2.Vuetify

Vuetify は、マテリアルデザイン仕様を使用して美しく手作りされたコンポーネントを備えた Vue UI ライブラリです。これは、マテリアルデザイン仕様に従って正確に開発されており、すべてのコンポーネントがモジュール式で応答性が高く、パフォーマンスが高いように細心の注意を払って作成されていることを意味します。

Vuetify を使用すると、ユニークで動的なレイアウトでアプリケーションをカスタマイズし、SASS 変数を使用してコンポーネントのスタイルを完璧にすることができます。

また、アクセシビリティガイドライン、すべての最新ブラウザもサポートし、Vue CLI-3 と互換性があります。統合が簡単で、カルーセル、ナビゲーション、カードなどの再利用可能な UI コンポーネントが多数あります。 Vuetify はオープンソースであり、Github では 29 を超えるスターがあり、NPM では毎週 319,170 件のダウンロードが行われています。

3.Chakra UI Vue

Chakra UI は、Vue アプリケーションを迅速かつ簡単に構築するためのツールを提供する、シンプルなモジュール式のアクセス可能なコンポーネントライブラリです。

すべてのコンポーネントはアクセス可能であり (WAI-ARIA 標準に厳密に従っています)、テーマ設定可能で、構成可能です。すぐに使えるレスポンシブスタイルをサポートし、ダークモードと互換性があります。

Chakra UI には、CBox や CStack などのレイアウトコンポーネントのセットも含まれており、これらを使用すると、props を渡すことでコンポーネントのスタイルを簡単に設定できます。また、Webpack プラグインソリューションを使用して Chakra UI Vue コンポーネントを自動インポートすることもできます。これはオープンソースであり、Github では 900 以上のスターを獲得しており、NPM では毎週 331 回ダウンロードされています。

4. ブートストラップ Vue

BootstrapVue、BootstrapVue を使用すると、Vue.js と人気のフロントエンド CSS ライブラリである Bootstrap を使用して、応答性が高く、モバイルファーストで ARIA にアクセスできるプロジェクトを Web 上に構築できます。ドキュメントもわかりやすく、設定も簡単です。これにより、フロントエンドの実装が高速化されます。

85 を超えるコンポーネント、45 を超える利用可能なプラグイン、いくつかのディレクティブ、および 1000 を超えるアイコンが提供されます。また、レイアウトやレスポンシブデザインに合わせた機能コンポーネントも提供します。 Nuxt.js モジュールを使用して、BootstrapVue を Nuxt.js プロジェクトに簡単に統合することもできます。

これは、ブートストラップ CSS フレームワークが使用されているのと同じ方法でも使用されます。これは Github でオープンソース化されており、約 12.9k のスターと 1.7k のフォークが含まれています。

5. ビューサックス

Vuesax は、Vuejs で作成された新しい UI コンポーネントフレームワークで、プロジェクトを簡単かつユニークで快適なスタイルで作成できます。vuesax はスクラッチから作成され、フロントエンド愛好家から、視覚的なアプローチを簡単に作成したいバックエンドまで、あらゆるタイプの開発者向けに設計されています。エンドユーザー。デザインはコンポーネントごとにユニークであり、視覚的なトレンドやデザインルールに固定されていないため、それを使用して構築されたプロジェクトもユニークなものになります。

応答性の高いページと、再利用可能でカスタマイズ可能な UI コンポーネントが提供されます。 npm または CDN を使用すると、簡単に始めることもできます。現在、最新バージョンの Vue CLI 3 はサポートされていません。これは Github でオープンソース化されており、NPM ではスター数が約 4.9 で、毎週 6700 回ダウンロードされています。

6. Ant デザインビュー

Ant Design vue は、Ant Design 仕様に基づいており、リッチでインタラクティブなユーザーインターフェイスを構築するための高品質のコンポーネントとデモのセットを含む vue UI ライブラリです。

Ant-design-vue は、スケルトン、ドロワー、統計など、Web アプリケーションを強化するための UI コンポーネントを多数提供します。

最近の ant design vue バージョン 2 のリリースでは、より高速かつ簡単に統合できるように更新され、バンドルサイズが小さくなったほか、Vue 3 (新しいコンポジション API ドキュメント) もサポートされています。最新の Web ブラウザ、サーバーサイドレンダリング、および Electron もサポートしています。 Github では 13 を超えるスターがあり、NPM では毎週 39,693 回ダウンロードされています。

7. クエーサー

Quasar は、開発者がすぐに使えるベストプラクティスを備えた Quasar CLI を通じて、すべてのプラットフォームで 2.0 つのソースコードベースを使用できるようにする、最高の Vue UI フレームワークの XNUMX つです。これにより、開発者は、周囲の他のすべての定型事項 (ビルドシステム、レイアウト) ではなく、アプリのコンテンツに集中できます。マテリアル XNUMX ガイドラインに従うことに重点を置いており、非常に協力的なコミュニティもあります。

Quasar の特別な点の 3 つは、コードを一度作成すると、それを 17.8 つのコードベースだけを使用して Web サイトやモバイルアプリとして同時にデプロイできることです。現在ベータ版の新しいバージョンもあり、vue XNUMX の機能をサポートします。 Github には約 XNUMXk のスターが付いています。

8. ブッフィー

Buefy は、Bulma (CSS フレームワーク) をベースにした Vue JS 用の軽量 UI コンポーネントライブラリです。 Buefy は Bulma と Vue を組み合わせて、最小限のコードを使用して見栄えの良いアプリケーションを構築できるようにします。これは、Bulma インターフェースの JavaScript レイヤーです。

完全にインポートすることも、通常の Web ページ上の単一コンポーネントをインポートすることもできます。これをプロジェクトに統合するのは非常に簡単で、npm または CDN を使用して実行できます。

Buefy は、既製の UI コンポーネント、レイアウト、アイコンを提供します。コンポーネントはテーマに対して SASS を使用できます。最新のブラウザもサポートしています。

9. Vueマテリアル

Vue マテリアルは、マテリアルデザイン仕様を実装する、広く使用されている軽量フレームワークです。これは、Vue.js とマテリアルデザイン仕様の間の最良の統合の 1 つです。簡単な API を通じて、あらゆるニーズに合わせて簡単に構成できます。

レスポンシブデザインと互換性があり、最新のすべての Web ブラウザーをサポートします。ライブラリはテーマ、コンポーネント、UI 要素に分かれています。テーマは、アプリケーションにテーマを設定する (または独自のテーマを作成する) 方法についての決定的なガイドを提供します。コンポーネントと UI 要素は、レイアウト、ナビゲーション、タイポグラフィ、アイコン、および 30 を超えるコンポーネントで構成されます。 Github には約 9.2 のスターと 1.1 のフォークがあり、NPM では毎週 21 件以上ダウンロードされています。

10.キーンUI

KeenUI は、Google のマテリアルデザインからインスピレーションを得た、シンプルな API を備えた軽量の vue.js UI ライブラリです。 Keen UI は CSS フレームワークではありません。したがって、グリッドシステムやタイポグラフィなどのスタイルは含まれていません。代わりに、JavaScript を必要とする対話型コンポーネントに重点が置かれています。

再利用可能なコンポーネントが約 30 個あります。コンポーネントは、SASS 変数を使用してスタイルをオーバーライドすることでカスタマイズできます。 CDN または npm を使用してプロジェクトに統合できます。オープンソースであり、Github には約 4 個のスターが付いています。

まとめ

UI コンポーネントライブラリを使用すると、プロジェクトの構築が確実に簡単になります。適切なものを選択するかどうかは、取り組みたいプロジェクトの機能によって異なります。新しいプロジェクトに取り組む前に、目的に最適な UI コンポーネントライブラリを確認することをお勧めします。