この間はvue.jsをとりあえず使ってみました。
vue.jsを使ったデザインテンプレートはいくつかあります。(前回一瞬使ったbootstrapVueなんかもそれです)
今回は、その中でもモダンなマテリアルデザインのライブラリであるVuetify.jsを使ってみます。
Vuetify
Vuetifyはこちら。
早い話が、コピペして使えるマテリアルデザインのデザインテンプレートです。 vueを使いながら手軽にサマになってるwebデザインが作れる代物です。
使い方
セットアップ
一応セットアップはこの辺に書いてあります。
前回までで、vue cliはインストール済みなので、その後ろからやってみます。 すでにプロジェクトがある場合には、次のコマンドだけで使えるようになります。
$ npm install vuetify --save
UIコンポーネント
セットアップまでできればあとは簡単で、単一ファイルコンポーネントのテンプレートタグの中にUIコンポーネントの中身を貼り付けて、適当に直していくとそれっぽいページができます。
(超ざっくり)
適当に使ってみる
というわけで適当に見繕って使ってみます。
Layouts
まずは適当に外枠を作ります。この辺使ってみました。
https://vuetifyjs.com/ja/framework/pre-made-layouts
この辺をApp.vueのtemplateタグの中に書いてあげればこんな感じです。
Dialog
次に適当にダイアログボックスを見てみます。
https://vuetifyjs.com/ja/components/dialogs
この辺を突っ込んで見るとこんな感じ。
開くとこんな感じ。
Text Field
テキストボックスはこんな感じ。
https://vuetifyjs.com/ja/components/text-fields
位置はこの辺いじると、上の画面に箱の位置のサンプルが確認できます。
https://vuetifyjs.com/ja/framework/grid
ちょうどいい感じのを選んで、下に出てきたタグを使うと調整できます。 試しに右寄せにしてみました。
Button
ボタンはこんな感じ。
https://vuetifyjs.com/ja/components/buttons
検索ボタンをつけてみました。
全部組み合わせてみた
特にコンテンツがあるわけでも無いですが、適当に使うだけでこんな感じの雛形ができました。
GitHub - nogawanogawa/vuetify_test
感想
手軽に今風のページが作れるのがいいですね。デザインとか全くわかってないので、こういうのがあるとそのへんが隠蔽できて非常に助かります。