Help us understand the problem. What is going on with this article?

なんとなくVue.jsのUIフレームワークを紹介する

More than 1 year has passed since last update.

概要

僕が今まで使ってきたVue.jsのUIフレームワークを紹介していきたいと思います。

Vuetify

image.png

難易度 ★★★☆☆
ドキュメントの読みやすさ ★★☆☆☆
コンポーネントの数 ★★★★★
汎用性 ★★★★★
おすすめ度 ★★★★☆

感想

コンポーネントも多いし、デザインも綺麗なのでおすすめのフレームワークです。
でもドキュメントがすごく読みにくいです、何度読んでもVuetifyのグリッドレイアウトはよく分かりません。

Bootstrap-vue

image.png

難易度 ★☆☆☆☆
ドキュメントの読みやすさ ★★★★★
コンポーネントの数 ★★☆☆☆
汎用性 ★★★☆☆
おすすめ度 ★★★★★

感想

Bootstrap4というCSSフレームワークをVue.js向けに拡張したフレームワークになります。
Bootstrap-vueは初めてUIフレームワークに触る人におすすめです。
ドキュメントも比較的読みやすいし、何よりBootstrapのクラス(マージンとかパディングとか)をそのまま流用できるのがいいです。
何でもできるというタイプのフレームワークではないのですが、絶妙なシンプルさが気に入っています。

Buefy

image.png

難易度 ★★☆☆☆
ドキュメントの読みやすさ ★★★★★
コンポーネントの数 ★★☆☆☆
汎用性 ★★☆☆☆
おすすめ度 ★★★★☆

感想

BulmaというCSSフレームワークをVue.js向けに拡張したフレームワークになります。
BuefyとBootstrap-vueは結構似たUIフレームワークだと思っています
このフレームワークでよく躓くのはBulmaの仕様の方なので最終的にBulmaのドキュメントばっかり見るようになります。
なんとなくBootstrap-vueのほうが使いやすかったです。

Quasar Framework

image.png

難易度 ★★★★★
ドキュメントの読みやすさ ★★★☆☆
コンポーネントの数 ★★★★★
汎用性 ★★★★★
おすすめ度 ★★★☆☆

感想

一番何でもできるUIフレームワークだと思います。
コンポーネントの数も多いしドキュメントも充実していますが、使いこなすには時間がかかると思います。
難易度が高いのでおすすめ度は低いです。

Onsen UI 2

image.png

難易度 ★★☆☆☆
ドキュメントの読みやすさ ★★☆☆☆
コンポーネントの数 ★☆☆☆☆
汎用性 ★☆☆☆☆
おすすめ度 ★☆☆☆☆

感想

モバイルアプリケーション(cordovaやmonaca)向けのUIフレームワークですね。
個人的にはおすすめはしません。
AngularやReactにも対応させているせいか、なんか無理やりな感じのするフレームワークワークですね。
ドキュメントも読みにくいし、コンポーネントも器用貧乏でかゆいところに手がとどかない感じです。

Framework7

image.png

難易度 ★★☆☆☆
ドキュメントの読みやすさ ★★☆☆☆
コンポーネントの数 ★★★☆☆
汎用性 ★★☆☆☆
おすすめ度 ★★☆☆☆

感想

こちらもモバイルアプリケーション向けのUIフレームワークですね。
Onsen UI 2よりは多少マシです。
このフレームワークもAngularやReactにも対応させているせいか、なんか無理やりな感じがします。
ドキュメントは頑張れば読めます。
あとルーティングがVue-Routerが使えません、その点でマイナスです。

Element

image.png

難易度 ★☆☆☆☆
ドキュメントの読みやすさ ★★★★☆
コンポーネントの数 ★★★☆☆
汎用性 ★★☆☆☆
おすすめ度 ★★★☆☆

感想

Elementは昔からあるUIフレームワークですね。
ですがモバイル対応が微妙とのことですぐに使うのやめちゃいました。
ドキュメントも読みやすいし、デザインも綺麗なのでまた使ってみたいですね。

総評

如何だったでしょうか?
てめぇその評価はおかしぃだろうがYO!
みたいな意見もあるでしょうが多めに見てください〜。

今回紹介したもの以外もVue materialやMint UIなどなどたくさんありますので使う機会があったら更新したいと思います。

yusuke_ten
難しいことは簡単に、簡単なことは面白く
https://yusuke-ten-portfolio.herokuapp.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away