Vue.js向けUIフレームワーク選定
2017/03調べ。現在はawesome-vueは整理された状態です
何がしたいのか
Vue.jsでちゃちゃっとアプリ作りたい
vue buildまたはvbuildで動けば最高
ある程度見た目も格好良くしたい
レイアウトとかもやりたい
作業所
リポジトリ作った
経緯
Vueでのコンポーネントセットフルスクラッチを経験
次はもう少しショートカットしたい
慣れてない時に土台がないのはやはりつらい
うっかり$dispatchで連携させたりしてしまった
awesome-vueを見る
https://gyazo.com/772b910f175ac6719355cb4de8de4712
Component Collectionだけで60個以上ある
無理
awesome-vue
現在ごちゃごちゃ。カテゴリも混ざってるし、古いのも含んでしまってる
この人がかなりクリーンアップしてくれてる模様。いい仕事
クリーンアップ後
基本的にVueは中国ユーザが多い
中国語DocしかないUIフレームワークとかが多い
いずれにしろ、利用ユーザが多いものから試用する。
使ってみたやつ
vuikit
vue-mdl
vue-admin
element-ui
keen-ui
vuikit
uikitベースだそう
見た目はすごい好み
サポーターがいる模様
手元でうまく動かない
webpackのボイラープレートが用意されているのでそれを使うと動きそう
vue-mdl
mdl自体は同梱していない
1コンポーネント=1 Vueファイル
ドキュメントが不足気味に感じる
マージン周りが詰めきれてない印象
カスタマイズして使うならありかも
vue-admin
品揃えはピカイチ（チャートライブラリとか複数種類入ってる）
インストールめっちゃ時間かかる
ドキュメントなくない？
導入方法分からなくて使えなかった
書きかけっぽい
keen-ui
シンプルな感じだけどライトウェイト（MDっぽい）
sassでカスタマイズできる
テーマカラーのカスタマイズ可
基本的に一つのコンポーネントは一つのVueファイル
足らないものは参考に自前コンポーネント書けばよさそう
table:サイズ
client.js 260kb
client.css 94.1kb
element-ui
いろいろ揃ってて見た目も綺麗
デフォルトテーマのコントラスト低すぎかも
table:サイズ
client.js 490kb
client.css 133kb
ロード方法
CDN経由
これが結局楽っぽい
NPM経由
パーツ毎に読み込みが出来る
…が、いちいち書くのは大変な気がする
パーツごとに読めるのはCSSのみである
でかいやつならサイズ削減効果あるかも
Webpack + css-loaderを使えば、下記のように読み込めるが…
code:javascript
import 'keen-ui/dist/keen-ui.css';
結局サイズは変わらんのじゃないかな
思ったこと
試すの結構つらい
ドキュメントの形態が統一されていればいいのにな…
どれもVue.use(Framework)で読み込めて良い
code:javascript
import KeenUI from "keen-ui"
Vue.use(KeenUI)
要素名とかも割と似通っている。相互に参考にしているのかな？
slot使ってるかそうでないかみたいに、多少好みがありそう
動くかどうかはものによる
インストール周りのドキュメントが充実してないと辛い
スター数はあてにならない
CDN経由安定な気はする
普通のCSSフレームワークで行くのも有りだと思う
クロスブラウザちゃんと対応できてるBootstrapとか
ただ、Vueでのコンポーネントの書き方みたいなのは参考になるので、これベースで足りないものを作り足していくのよさそう
なんでもかんでも揃える必要はあるのかという問題
単品コンポーネントは割と落ちてる