Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
105
Help us understand the problem. What is going on with this article?

More than 3 years have passed since last update.

@sakapun

Vueでちゃんと作っていくにはElementUIよりBulmaの方が良くないか

Vueのアドベントカレンダーをウォッチしていてて、Nuxt.jsであるアプリを作っている途中です。
色々な記事でElementUIが取り上げられているので、私も使ってみましたが正直微妙になってきたので止めることにしました。

単体でレスポンシブのサイトは簡単に作れない。

ElementUIはUIパーツのライブラリです。
レイアウトも部品として影響していますが、提供している部品の数はさほど多くありません。
そして、モバイル向けに配慮した機能は全く提供されません。
そのため、レスポンシブ対応するためには、一からやるか他のCSSフレームワークを組み合わせる必要が出てくると思います。

タイポグラフィ、レイアウトなどが簡単にできるわけではない

ElementUIはあくまでもUIライブラリです。
私はコレを最初に見た時、Bootstrapみたいだから簡単にきれいなレイアウトが整うんだろうなと思っていました。

しかし違った。

class="text-center"とだけ書いて中央寄せしたいけど、そういうものは提供されていません。
<el-col/>などの要素をラッピングするレイアウトパーツにはmarginやpaddingがいい感じに入っているわけではなく、そこも手を入れなければいけません。

classだけビャーって書いてある程度整うCSSフレームワークが使いたかったんです。。。

突然出てくる中国語

とりあえずドキュメントの最初に出てくるのが中国だったり、
typographyのとこの文字が中国語だったり、
Githubのissueに中国語が投げつけられていたり、

私には馴染めませんでした。

本当に欲しかったもの

前にBootstrapでの開発体験がとても良かった思い出があります。
本当にほしいのはBootstrapのようなclassを書いたら整い、部品としての見た目が整うCSSフレームワークだったのです。

ですが、Bootstrapは正直jQueryとベッタリしすぎている印象があります。
cssのみ導入するのもありなんでしょうが、公式ドキュメントを読んでも動かせないパーツが多いのはつらいです。

そこでBulma

https://bulma.io/
Vueのアドベントカレンダーでも何人かの方が使っておられましたが、Bulma良さそうです。
CSSフレームワークであり、JSの要素は一切提供しません。

これであれば、classを書くだけである程度のデザインができるはず。
cssはあまり書きたくはない!

さすがに足りないパーツはありそう

JSの動きが必要とするコンポーネントは何もないので、switch,slider, 複数選択のセレクトボックスなど、そういうものは無い。
そういうものが必要になったら、bulmaを基軸にしたUIコンポーネント探して、それでもなかったら自作になるのかなと思います。
https://buefy.github.io/#/
https://bulma.io/extensions/

Element-UIを利用する前に、本当に部品だけを使いたいのか、検討してから使うことをおすすめします。

105
Help us understand the problem. What is going on with this article?
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
105
Help us understand the problem. What is going on with this article?