Vuetifyでプロジェクトを作成してみる!2018/8/14こんにちは!スギモトです!以前、Vuetifyをちょっとだけ試してみたところ意外にもアクセスが多かったので驚いています。このフレームワークそんなに検索されるんですね。Vueでマテリアルデザインに対応しているものが少ないからでしょうか。キーワード的には「Vue.js」「vue-cli」が多かったのですが、あまり記事と関係ないような......。マテリアルデザインにトライ!で、今回ですが、なんと最近Vue-cliの3系が登場しています。Vuetifyをサクッと試してみようと思います。1.26.0Vue-cli@3.0.0Vue@2.5.17Vuetify@1.1.11Webpack@4.16.5npm導入済みという前提で進めます。3をインストールしていない方はまずは導入しましょう。-g続いてプロジェクトを作成します。vuetifyコマンドを実行すると色々聞かれるので適当に選択。Yesここまでで、Vue.jsのサンプルプロジェクトは完成のはずです。動作確認したい方は下記のコマンドを実行してみてください。serve立ち上がったと思います。以前はVuetifyをinstallしたあと、色々importしていましたが今回は不要です。自動でセッティングしてくれるようで、便利ですね。たたし、Vuetifyのバージョンが1.0.19でしたので、自分で最新版(このエントリー投稿時点では1.1.11)にアップデートしました。vuetify@1.1.11コンポーネントを使ってみるVuetifyには多くのコンポーネントがあります。詳しくは公式サイトでご確認ください。今回は業務系システムは必須であろうDataTableを使ってみようと思います。コンポーネント名「v-data-table」をtempleteに追加することで利用できます。詳しくはこちら(公式サイト)https://vuetifyjs.com/ja/components/data-tablesサンプルコードをただ貼り付けるだけでも、データテーブルが表示されました。標準で列ソート、全文検索、全レコード選択、ページネーションなどの機能があってとても使い勝手がいいです。ヘッダーとフッターを固定することができないのはなぜなのか......。v1.2の登場が間近のようです。新しいコンポーネントが追加されたり、v1.1までのコンポーネントにも若干の修正が入っている模様。ベータ版なので、正式にリリースされたら試してみようと思います。Codeから離れられない!フロントエンジニア向けおすすめ拡張機能5選スギモト(@sugimotonote)です。今年で31歳になりました。新卒で独立系SIerに入社して気がつけば8年。ここ何年かは某大手メーカーに常駐して社内SEとしてレガシーな業務システムをモダン化しています。