GootaTECH・DESIGNLIFE・REVIEWCONTACTHOMETechVue用UIコンポーネントライブラリのVuetifyを使ってみたVue用UIコンポーネントライブラリのVuetifyを使ってみた2019/09/16B!こんにちは、お読みいただきありがとうございます。ケン(@gootablog)です。仕事で管理画面を作る必要があり、初めてVuetifyを使いました。備忘録してどういうものを使ったか、UIコンポーネントを使ってみてどうだったかなどを書いていきます。vuetifyでインストールすると自動で設定をしてくれますが一応書きます。今回は自動で必要なものを読み込む設定にする。実際に使ったUIコンポーネントのサンプルをおいておきます。サイトhttps://vue-sample.kens-portfolio.com/vuetifyソースコードhttps://github.com/Kenj-I/vueSamplevuetifyを使うときはApp.vueで大枠をv-appタグで囲んでから使用しましょう。auto;}</style>こんな感じでv-data-tableタグに設定やデータを渡してあげると簡単にテーブルを表示することができます。値を加工したい場合はtemplateタグを使って加工する値のキーを指定してよしなにすることができます。これだけでソートもできる、表示数も変えられる、ページネーションもできるって最高すぎます。仕事ではサーバーサイドページネーションで作ったので表示数を変えたりソートしたりしたときは都度APIコールするようにして作成しました。!important;}</style>データを削除したり、更新するとき、ステータスを変えるときに使用しました。ダイアログのレイアウトはいろいろと設定ができるのでサイズやカラーなどサイトに合うようにカスタマイズできます。表示されるときは親コンポーネントでrefsを使って子コンポーネントのmethodsを実行して表示するようにしています。ダイアログで確認後の実行アクションはemitを使い親コンポーネントに知らせています。0;}</style>APIを実行したときなどの結果をアラートを使って表示させました。右上から出てきて数秒後に消すという感じにしています。実際にはVuexで状態管理をしました。現状複数のアラートを出すと書き換わってしまうので、複数出せるようにしたいところ。100;}</style>ローディングはいくつかパターンがありましたが、プログレスバーを使用しました。非同期で送るのでしっかりリクエストを送ってるのはわかるようにしてます。ローディングをしているときは、レイヤーを一枚挟んでクリックなどの操作をしないようにしています。UIコンポーネントを使ってみて大きめのUIコンポーネントを使ったのはこの4つくらいでした。これくらいで基本的な管理のページを作れるのはいいですね。レイアウト(flexやmarginなど)もタグに設定を書き足せばいいだけなのでとても便利でした。これまでBootstrapなどのCSSフレームワークを使ってこず、基本はフルスクラッチみたいな感じでやってきました。使ってみて、使い方を理解するまでは少し難しさを感じましたが慣れるとサクサク書けます。ポイントポイントで使うととても強力なツールになりそうです。今後も機会があったら積極的につかってみようと思います。S3に画像をアップロード・ダウンロードする方法プロフィールケン25才のWebエンジニア。PHP,JS,Pythonが使えます。このブログではプログラミングのことと日常のことを半々くらいで書いています。私生活ではこだわりが詰まった好きなモノの中でゆるりと生活しています。趣味は筋トレ、サウナ、コーヒー。