どこにでもいるSEの備忘録

たぶん動くと思うからリリースしようぜ

Vuetify.jsを使ってみた

f:id:nogawanogawa:20190302094848j:plain

この間はvue.jsをとりあえず使ってみました。

nogawanogawa.hatenablog.com

vue.jsを使ったデザインテンプレートはいくつかあります。(前回一瞬使ったbootstrapVueなんかもそれです)

今回は、その中でもモダンなマテリアルデザインのライブラリであるVuetify.jsを使ってみます。

Vuetify

Vuetifyはこちら。

vuetifyjs.com

早い話が、コピペして使えるマテリアルデザインのデザインテンプレートです。 vueを使いながら手軽にサマになってるwebデザインが作れる代物です。

使い方

セットアップ

一応セットアップはこの辺に書いてあります。

vuetifyjs.com

前回までで、vue cliはインストール済みなので、その後ろからやってみます。 すでにプロジェクトがある場合には、次のコマンドだけで使えるようになります。

$ npm install vuetify --save

UIコンポーネント

セットアップまでできればあとは簡単で、単一ファイルコンポーネントのテンプレートタグの中にUIコンポーネントの中身を貼り付けて、適当に直していくとそれっぽいページができます。
(超ざっくり)

適当に使ってみる

というわけで適当に見繕って使ってみます。

Layouts

まずは適当に外枠を作ります。この辺使ってみました。

https://vuetifyjs.com/ja/framework/pre-made-layouts

この辺をApp.vueのtemplateタグの中に書いてあげればこんな感じです。

f:id:nogawanogawa:20190307215720p:plain

Dialog

次に適当にダイアログボックスを見てみます。

https://vuetifyjs.com/ja/components/dialogs

この辺を突っ込んで見るとこんな感じ。

f:id:nogawanogawa:20190307222902p:plain

開くとこんな感じ。

f:id:nogawanogawa:20190307225927p:plain

Text Field

テキストボックスはこんな感じ。

https://vuetifyjs.com/ja/components/text-fields

位置はこの辺いじると、上の画面に箱の位置のサンプルが確認できます。

https://vuetifyjs.com/ja/framework/grid

f:id:nogawanogawa:20190308171920p:plain

ちょうどいい感じのを選んで、下に出てきたタグを使うと調整できます。 試しに右寄せにしてみました。

f:id:nogawanogawa:20190308172039p:plain

Button

ボタンはこんな感じ。

https://vuetifyjs.com/ja/components/buttons

検索ボタンをつけてみました。

f:id:nogawanogawa:20190308173806p:plain

全部組み合わせてみた

特にコンテンツがあるわけでも無いですが、適当に使うだけでこんな感じの雛形ができました。

GitHub - nogawanogawa/vuetify_test

感想

手軽に今風のページが作れるのがいいですね。デザインとか全くわかってないので、こういうのがあるとそのへんが隠蔽できて非常に助かります。