semantic uiをvueに使おうと思ったが…対応していないと辛い気がする…

徒然草2.0

https://semantic-ui.com/introduction/getting-started.html
semantic ui (css フレームワーク)でデザイン作ろうと思っていますが…こじゃれた感じなので。だがしかし…
# Using Build Tools
Semantic UI packaged Gulp build tools so your project can preserve its own theme changes.
The easiest way to install Semantic UI is our NPM package which contains special install scripts to make setup interactive and updates seamless.
For installing with specific integrations like Ember, React, or Meteor, see our integration guide
For integrating Semantic UI tasks into your own build tools, or using a CDN see our recipes section.
ビルドツールの使用
セマンティックUIパッケージ化されたGulpビルドツール。プロジェクトが独自のテーマの変更を保持できるようにします。
セマンティックUIをインストールする最も簡単な方法は、セットアップをインタラクティブにして更新をシームレスにする特別なインストールスクリプトを含むNPMパッケージです。
Ember、React、Meteorなどの特定の統合でのインストールについては、統合ガイドを参照してください
セマンティックUIタスクを独自のビルドツールに統合する方法、またはCDNを使用する方法については、レシピセクションをご覧ください。
—-ここで、気が付いたが…よくよく調べていくとvueでvue対応していないcssフレームワークは使えないってことはないでしょうが面倒な手間が増えるっぽいので無難な路線で行ったほうがよさそう—————-
gulpを導入すると複数人で作業する時に楽らしい
https://app.codegrid.net/entry/gulp-1
Terminology(用語)https://semantic-ui.com/introduction/glossary.html ※若干、特殊?
layouts (レイアウト) https://semantic-ui.com/usage/layout.html
—-
semantic ui はreactとかにはいいがjqueryデフォで呼んでてvueに適用しにくい気がするのでやめた。
vueと合わせるなら…
参考:https://qiita.com/yoshixj/items/ed8e4cf3855500522fd3
buefy(https://buefy.org/
vuetify(https://vuetifyjs.com/ja/
bootstrapVue,ElementUI,QuasarFrameworkあたりがいいっぽい?
vuetifyの比較表を見ると「おいらが一番!」って書いてあるけど。実際はなぞ。
サポートやプレミアムテーマがあって商売臭い感じがプンプンする。どっちがいいんだろ。。。
https://medium.com/fabric-tokyo-engineering/nuxt-js-tailwind-css-%E3%81%A7%E7%88%86%E9%80%9F%E3%82%B3%E3%83%BC%E3%83%9D%E3%83%AC%E3%83%BC%E3%83%88%E3%82%B5%E3%82%A4%E3%83%88%E4%BD%9C%E6%88%90-da2564d73f90
iView(https://www.iviewui.com/)中国語なので…とりあえずパスかな…。
tachyons(http://tachyons.io/#principles)ちとエンジニアリング臭い。もっと洗練した感じが…(使う人の問題かもだけど)
ant design(https://ant.design/)管理画面用…なんかアニメーションといいチャライ雰囲気と配色。
tailwind(https://medium.com/fabric-tokyo-engineering/nuxt-js-tailwind-css-%E3%81%A7%E7%88%86%E9%80%9F%E3%82%B3%E3%83%BC%E3%83%9D%E3%83%AC%E3%83%BC%E3%83%88%E3%82%B5%E3%82%A4%E3%83%88%E4%BD%9C%E6%88%90-da2564d73f90) classベースで開発者にはよさげ?
blumaとbootstrapは微妙。ただ「これはbootstrap?と分かる」のは、
過去のできごとになってきている…?のかな。まあ言われればたしかに。
初めてのtailwindcss (Vue.js + PurgeCSS)
https://qiita.com/hisako135/items/49c05633de4dadfcd627
buefyはbootstrapとblumaのコンビなの?
https://www.virment.com/how-to-use-beufy-vuejs/
もし今、UIフレームワークを使ってvue.jsのアプリを作るなら。。。
https://inokawablog.org/vue-js/comparison-ui-framework/
>私はTailwindCSSかVuetifyを選びます(中略)デザインを学んでいない場合、下手に凝ったデザインにするよりもマテリアルデザインを取り入れた方が万人受けしやすいものを作ることができ
これは一理ある。
https://vuematerial.io/
Quasar Framework(https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F251548%2F5c5a0fd2-ef81-1d72-92cb-2fb6000ae436.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=0a16cd2342d5ec7c1c1021394bcfafa0)
なんとなくVue.jsのUIフレームワークを紹介する(https://qiita.com/yusuke_ten/items/4103f032dd0c6fbe5607)
…シンプルで行くか無難で行くかこじゃれていくか悩ましいが、bootstrapかbuefyあたりがよさそう。tailwindcssは後で自分でカスタマイズする時などはいいが、今回はそのへんの自由度を望まない&頼れない気がする。そういう意味ではフルスタックなcssフレームワークのほうがましな結果になると思われる。マテリアルデザインは言うて使いこなすのが難しい気がする。(例)google

徒然草2.0
スポンサーリンク
シェアする
gomiryoをフォローする
ごみぶろぐ

コメント

タイトルとURLをコピーしました