~インストールから使い方まで~2019/9/16こんにちは!スギモトです!業務でVuetifyを使って早くも2年近くたっていますが、未だに使い方で混乱することがあります。Vuetifyはすごく便利で使いこなせばものすごく強力なツールとなってくれるのですが、若干使い方にクセがあるような気もしています。導入しようと思いっていても、断念した方も多いことでしょう。そこで、今回はVuetify入門として、インストールから以下の代表的なコンポーネントの使い方を整理していきたいと思います。v2.0系を前提に進めていきますが、v1.5系でもさほど違いはありません。公式サイトにインストール方法が掲載されています。基本的にはこの流れにそっていけばOK。使える状態であること。22:24Vuetifyを既存のプロジェクトに追加する方法すでに稼働しているアプリケーションにVuetifyを追加したい場合もあるかと思います。苦戦するかもしれませんが、その場合の追加方法も公式サイトに掲載されています。既存のアプリケーションに追加する場合v-layoutについてVuetifyを導入する場合、まず間違いなくグリッドシステムを利用することになると思います。<v-layout>はグリッドシステムを使うために必須です。flex;と同じ意味です。組み合わせて使います。v-flexについて<v-layout>の内側に設置することで、グリッドとして利用できます。Vuetifyは12分割したグリッドシステムを採用しており、ディスプレイサイズに応じて幅を可変させることができます。lg3>サンプル</v-flex>これは、xsサイズのときは幅12で、smサイズのときは幅6にしてくれという意味となります。この<v-flex>のグリッドシステムについては、説明を聞くよりも実際に手元で動かしてみたほうが理解が早いと思います。わからない方はぜひサンプルコードを作ってみて試してみることをおすすめします。公式サイトにも具体的な説明が掲載されていますのでご確認ください。マテリアルデザインを実現するために必要な要素が用意されており、ほとんどpropsで渡すだけで、開発者は何もすることがないくらい便利です。見にくいので色を濃くするか変えてと毎回ユーザから改善要望がくるんですよね。できない、みたいな制御も大量に行うのですが、Vuetifyの<v-text-field>の入力不可のデザインがスタッフ部門に不評で、しかたがなくデザインを上書きしているのが、ちょっとめんどくさい。それ以外は問題ないんですけどね。v-listについて<v-list>も業務でよく使います。なんとなくわかると思いますけど、Vuetifyのリストです。Componentただ、標準的なリストと違ってはじめからいい感じにデザインされているので個人的にかなり重宝しています。アバターとかアイコンみたいなモノを出したいときに便利です。あと、<v-navigation-drawer>と組み合わせてサイドメニューを作るときにも必ず利用することになりますね。その他よく使うコンポーネントv-date-pickerv-data-tablev-alertv-cardv-dialogどれもアプリケーションを作成する際には必須となる機能ですが、当然Vuetifyにもありますし、比較的簡単に導入できます。よかったらこちらも参考にしてください。18:00まとめいかがでしたでしょうか?まだまだ全然紹介しきれていないのですが、Vuetifyは便利なフレームワークですのでぜひ実践投入を検討してみてください。【Window10】初心者でもイケそうなGitクライアント3つ選んでみたVuetifyのDataTableの列幅を固定にする方法Vue.jsのUIライブラリ「Element」使ってみた【レビュー】「おうちでタピオカ」が楽しかったので紹介したい!【2019年】買ってよかったモノたちを発表します!スギモト(@sugimotonote)です。今年で31歳になりました。新卒で独立系SIerに入社して気がつけば8年。ここ何年かは某大手メーカーに常駐して社内SEとしてレガシーな業務システムをモダン化しています。