開発者ドキュメント

まとめ：Vue.jsデスクトップWebアプリコンポーネントライブラリ-2017年第4四半期に更新

getdocs

優れたビューレンダリングライブラリには、開発者が作業できるサードパーティのコンポーネントがたくさん含まれている必要があります。 Vueも例外ではありません。 それはあなたがあなたが適切だと思うどんなプロジェクトでも使うためのたくさんの素晴らしいコンポーネントライブラリを持っています。

最終更新日：2017年11月27日。

過去1年間で、Vue.js用の高品質のデスクトップ/ Webに適したコンポーネントライブラリとフレームワークの数が急増しました。つまり、この記事を更新するときが来ました。 ここでは、次のプロジェクトについて十分な情報に基づいた決定を下せるように、各ライブラリのさまざまな機能と統計の概要を説明します。

簡潔にするため、また選択の麻痺を避けるために、大規模である可能性があるが、保守が不十分であるか、完全なドキュメントが不足しているように見えるライブラリを積極的に除外します。

これらのコンポーネントコレクションの大部分は、MaterialまたはAntの設計ガイドラインに従いますが、いくつかの外れ値があります。 そのため、デザイン言語に基づいてカテゴリに分類します。

コンポーネントカテゴリ

コンポーネントカテゴリは、すべてのコンポーネントを一覧表示することなく、ライブラリに含まれるコンポーネントを示すために使用されます。 可能なカテゴリのリストは次のとおりです。 ライブラリに各カテゴリで指定されたコンポーネントの大部分がない場合、そのカテゴリは存在として示されません。

マテリアルデザイン

多くの人がマテリアルデザインに精通しています。マテリアルデザインは、Googleが作成したデザイン言語で、フラットなスタイルとリアルな照明と影を組み合わせて、使い慣れたインターフェースを作成します。 Vueには、マテリアルデザインを実装するさまざまなライブラリがあります。

Vueマテリアル

Vue Material は、マテリアルデザイン仕様のほぼ全体をカバーする多数のコンポーネントを備えた強力なライブラリです。 仕様に可能な限り準拠しているため、コンポーネントはGoogleのネイティブ実装とほとんど区別できません。 ちなみに、しかし、それは少し遅い側に見えます。

流れ落ちる

結論（TL; DR）これを使用してアプリ全体を開発することをお勧めします。 ファイルアップローダーやオートコンプリートコンボボックスなどのより高度な入力には、他のサードパーティコンポーネントが必要になる場合がありますが、それ以外のほとんどすべてについては、 VueMaterialで対応できます。

Vuetify

Vuetify は、もう1つの優れたマテリアルデザインコンポーネントライブラリです。 これは、アプリを0から本番環境に移行するためにゼロから設計されています。 そのため、最も単純なユースケースから完全なSSR、Electron、PWA、Nuxt.jsの例まですべてをカバーする8つのCLIテンプレートが含まれています。 Vue Material と同様に、マテリアルデザインの仕様に準拠していますが、コンポーネントの追加オプションとカスタマイズにより、ほぼすべての可能なユースケースをカバーします。 Vuetify にもその背後に大きなコミュニティがあり、多くの企業スポンサーがいます。

流れ落ちる

結論（TL; DR） Vuetify には、必要なものがすべて揃っています。 選択すれば間違いないでしょう。 それはあなたのためにかなりの数の選択をするように見えます、しかし一方でそれはあなたに働くためのたくさんのオプションをあなたに残します。

クエーサーフレームワーク

Quasar Framework は、すべてを網羅した、すべてを網羅したフレームワークとして意図されています。 以前はモバイルコンポーネントのまとめでスポットを獲得していましたが、その後、一般的なデスクトップおよびWebアプリコンポーネントを含むように機能をさらに拡張しました。 CLIもあります！ それは基本的にあなたが考えることができるほとんどすべてを備えた台所の流しです。 一緒に Material Design テーマも含まれています iOS 今後さらに多くのテーマがあります。 私の唯一の不満は、コンポーネントの品質がかなり低く、フォントとアニメーションの使用法に一貫性がないことです。

流れ落ちる

結論（TL; DR） Quasar は、できるだけ少ないカスタム作業でできるだけ多くのプラットフォームとコンポーネントをカバーしたい場合に最適です。 常に改善されていますが、現時点では、本格的な商用アプリよりもプロトタイプを対象としているようです。

鋭いUI

Keen UI は、マテリアルデザインスタイルのコンポーネントの重要なセットを提供します。 仕様に直接準拠しているわけではなく、多くの場合、より軽いコンポーネントとより高速なトランジションを選択しますが、その結果、ここにあるより重いライブラリのいくつかよりも高速に感じられます。 コンポーネント以外はほとんど含まれていません。 レイアウトやタイポグラフィシステムはありません。 あなたの目標が何であるかに応じて、これはプラスまたはマイナスになる可能性があります。 結果として、それは前述のオプションのいくつかよりも少し軽量です。

流れ落ちる

結論（TL; DR）さまざまなコンポーネントが必要であるが、他のすべて（レイアウト、タイポグラフィ、ツールなど）を自分で処理している場合に適しています。 また、パフォーマンス部門には少し欠けているようです。

特記事項

Antデザイン

Antデザインは、中国で人気のあるデザイン言語です。 これは、世界最大のeコマース企業の1つであるAlibabaによって作成されました。 Ant Designは、使い慣れた間隔と手がかりを、使いやすい、わずかに丸みを帯びたインターフェイス要素で優先します。 携帯電話またはデスクトップで中国語のアプリケーションを使用したことがある場合は、それらすべてが親しみやすく、やや親しみやすい感じで、余白を小さくし、白地に明るい色を選択していることに気付くでしょう。 それがAntDesignが伝えようとしている感覚です。

アリババはさまざまな開発目的でVueを使用しているため、AntDesignUIライブラリが豊富に用意されているのも当然です。

エレメント

Element UIを含めずに、Vueコンポーネントツールキットのまとめを作成することはできません。 これは、Vueで利用できる最も古くて最もよく知られているUIライブラリの1つであり、それ以来、ReactとAngularにも移植されています。 Eleme のメンバーは最近、新しいテーマ、アクセシビリティの向上、Typescriptのサポート、新しいアイコン、さまざまな新しいコンポーネントとオプションを含む2.0バージョンのElementUIをリリースしました。

Ant Designに直接準拠していませんが、そこからかなりの数の手がかりを借りています。

流れ落ちる

結論（TL; DR）要素は少しヘビーヒッターです。 それはあなたが必要とすることができるすべてとそれ以上を持っています。 いくつかの規則は少し奇妙ですが、それ以外の点では、ほとんどのユースケースをカバーするのに適しています。 Elementのコンポーネントと機能の品質は他の追随を許さないものであり、迅速な使い捨てプロジェクトから大規模なサイトやアプリまで、あらゆるものに非常に便利です。

iView

Elementと同様に、 iView には、Antデザイン言語にほぼ準拠した膨大な数のコンポーネントが含まれています。 また、テーマを処理するためのいくつかのコミュニティツールとカスタムWebpackローダーもあります。 現在、活発に開発中です。 私の唯一の懸念は、パフォーマンスの低下という奇妙なスパイクがときどき発生することです。

流れ落ちる

結論（TL; DR） iViewは、多数の高品質コンポーネントを利用できるElementの価値ある競争相手です。 しかし、結果として重量部門で苦しんでいます。

特記事項

他の

上記のカテゴリに当てはまらないコンポーネントコレクションがいくつかありますが、一見の価値があります。

Buefy

Bulma の上に構築された、Buefyは、Bulmaスタイルで動作するために必要なロジックのみを提供し、可能な限り邪魔にならないようにします。 このように、それはかなり軽量ですが、それでも素晴らしいように見えます。 他のフレームワークに含まれるすべてのコンポーネントが含まれているわけではありませんが、一般的なコンポーネントのほとんどが含まれています。

流れ落ちる

結論（TL; DR） Buefyは、サイトに興味深く柔軟なUIコンポーネントが必要な場合に最適です。 たぶん、筋金入りのWebアプリにはそれほど優れた選択肢ではありません。

BootstrapVue

由緒あるBootstrapがバージョン4で再び復活し、これまで以上に滑らかに見えます。 Vueコミュニティは、決して取り残されることなく、 BootstrapVue で応答しました。これは、Bootstrap 4のjQuery部分を適切なVueコンポーネントに置き換え、その他の便利なビットも大量に追加するライブラリです。 BootstrapVueはレイアウト部門で多くをカバーしていますが、モバイルよりもデスクトップでの使用を対象としたより高度な入力に関しては、少し不足していると感じるかもしれません。

流れ落ちる

結論（TL; DR） Bootstrapが好きなら、おそらくBootstrapVueが好きになるでしょう。 これは、主にデスクトップおよび/またはキーボードシステムで使用されるサイトに最適です。 モバイルまたはより高度なアプリでのマイレージは異なる場合があります。 BootStrapVueはまた、アクセシビリティ部門で、ここにある他のほとんどのツールキットよりもはるかに優れた仕事をします。

不足している、または追加する必要があると思われるものがある場合、またはコンポーネントライブラリの選択についてお知らせしたい場合は、ご意見をお聞かせください。

モバイルバージョンを終了