概要
僕が今まで使ってきたVue.jsのUIフレームワークを紹介していきたいと思います。
Vuetify
| 難易度 | ★★★☆☆ |
| ドキュメントの読みやすさ | ★★☆☆☆ |
| コンポーネントの数 | ★★★★★ |
| 汎用性 | ★★★★★ |
| おすすめ度 | ★★★★☆ |
感想
コンポーネントも多いし、デザインも綺麗なのでおすすめのフレームワークです。
でもドキュメントがすごく読みにくいです、何度読んでもVuetifyのグリッドレイアウトはよく分かりません。
Bootstrap-vue
| 難易度 | ★☆☆☆☆ |
| ドキュメントの読みやすさ | ★★★★★ |
| コンポーネントの数 | ★★☆☆☆ |
| 汎用性 | ★★★☆☆ |
| おすすめ度 | ★★★★★ |
感想
Bootstrap４というCSSフレームワークをVue.js向けに拡張したフレームワークになります。
Bootstrap-vueは初めてUIフレームワークに触る人におすすめです。
ドキュメントも比較的読みやすいし、何よりBootstrapのクラス(マージンとかパディングとか)をそのまま流用できるのがいいです。
何でもできるというタイプのフレームワークではないのですが、絶妙なシンプルさが気に入っています。
Buefy
| 難易度 | ★★☆☆☆ |
| ドキュメントの読みやすさ | ★★★★★ |
| コンポーネントの数 | ★★☆☆☆ |
| 汎用性 | ★★☆☆☆ |
| おすすめ度 | ★★★★☆ |
感想
BulmaというCSSフレームワークをVue.js向けに拡張したフレームワークになります。
BuefyとBootstrap-vueは結構似たUIフレームワークだと思っています
このフレームワークでよく躓くのはBulmaの仕様の方なので最終的にBulmaのドキュメントばっかり見るようになります。
なんとなくBootstrap-vueのほうが使いやすかったです。
Quasar Framework
| 難易度 | ★★★★★ |
| ドキュメントの読みやすさ | ★★★☆☆ |
| コンポーネントの数 | ★★★★★ |
| 汎用性 | ★★★★★ |
| おすすめ度 | ★★★☆☆ |
感想
一番何でもできるUIフレームワークだと思います。
コンポーネントの数も多いしドキュメントも充実していますが、使いこなすには時間がかかると思います。
難易度が高いのでおすすめ度は低いです。
Onsen UI 2
| 難易度 | ★★☆☆☆ |
| ドキュメントの読みやすさ | ★★☆☆☆ |
| コンポーネントの数 | ★☆☆☆☆ |
| 汎用性 | ★☆☆☆☆ |
| おすすめ度 | ★☆☆☆☆ |
感想
モバイルアプリケーション(cordovaやmonaca)向けのUIフレームワークですね。
個人的にはおすすめはしません。
AngularやReactにも対応させているせいか、なんか無理やりな感じのするフレームワークワークですね。
ドキュメントも読みにくいし、コンポーネントも器用貧乏でかゆいところに手がとどかない感じです。
Framework7
| 難易度 | ★★☆☆☆ |
| ドキュメントの読みやすさ | ★★☆☆☆ |
| コンポーネントの数 | ★★★☆☆ |
| 汎用性 | ★★☆☆☆ |
| おすすめ度 | ★★☆☆☆ |
感想
こちらもモバイルアプリケーション向けのUIフレームワークですね。
Onsen UI 2よりは多少マシです。
このフレームワークもAngularやReactにも対応させているせいか、なんか無理やりな感じがします。
ドキュメントは頑張れば読めます。
あとルーティングがVue-Routerが使えません、その点でマイナスです。
Element
| 難易度 | ★☆☆☆☆ |
| ドキュメントの読みやすさ | ★★★★☆ |
| コンポーネントの数 | ★★★☆☆ |
| 汎用性 | ★★☆☆☆ |
| おすすめ度 | ★★★☆☆ |
感想
Elementは昔からあるUIフレームワークですね。
ですがモバイル対応が微妙とのことですぐに使うのやめちゃいました。
ドキュメントも読みやすいし、デザインも綺麗なのでまた使ってみたいですね。
#総評
如何だったでしょうか？
てめぇその評価はおかしぃだろうがYO！
みたいな意見もあるでしょうが多めに見てください〜。
今回紹介したもの以外もVue materialやMint UIなどなどたくさんありますので使う機会があったら更新したいと思います。