Vue.js + vuetify + vue-cli でマテリアルデザインにトライ!

vuetifyをご存知でしょうか。

Googleが「マテリアルデザイン」というフレーズを広めていますが、実際のプロジェクトに適用した経験がある方はまだまだ珍しいのではないでしょうか。

特に業務系システムならではかもしれませんが、プロジェクトには色々な制約があり、中々先進的なデザインを導入するのには皆さん抵抗があるようで、結局表面上のデザインはレガシーなままで開発を進めることも多く経験しました。

ただ、世の中的には「マテリアルデザイン」をベースにしたWebサイトを多く見ますし、フレームワークも数多く登場しています。

そこで今回はお勉強がてらVue.js + vuetify + Webpackという簡単な構成でサンプル画面を作成してみたいと思います。

Material Design Component Framework

Vue-cli v3を使ってのVuetify導入はこちら

前提条件

  • Win10
  • VSCode
  • Vue@2.5.11
  • vuetify@1.0.11
  • Webpack@3.6.1

npm導入済みという前提で進めます。

準備

便利なのでvue-cliを使いましょう。

インストールしていない方は下記のコマンドを叩いて下さい。

npm i -g vue-cli

vueコマンドでプロジェクト作成

vue init webpack-simple vuetify-test

色々インストール

npm i

ここまでで、Vue.jsのサンプルプロジェクトは完成のはずです。

動作確認したい方は下記のコマンドを実行してみてください。

npm run dev

立ち上がったと思います。

Vuetifyの話はここから

Vuetifyをインストール

npm install vuetify --save

main.jsにimport vuetifyを追加

index.htmlにマテリアルデザインアイコンを追加(重要)

<head>
 <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
</head>

これでプロジェクトでVuetifyを利用できるようになりました。

Vuetifyのコンポーネントを使ってみる

DatePicker

App.vue

実行結果

公式サイトのサンプルコードをそのまま貼り付けるとチェックボックスの位置がズレますが、ちゃんとカレンダーは表示されました。

お手軽ですね。

「Element」同様サクッと高品質なコンポーネントを導入することができました。

ここまで15分もかかっていません。

合わせて読みたい!

まとめ

やはりvue.jsはお手軽ですね。さらにvue-cliを利用するとプロジェクトの立ち上げが爆速でできると思います。

今回はCSSフレームワークに「Vuetify」を使ってみました。

はじめて触ったのですが、公式サイトのチュートリアルが手厚いので困ることもありませんでした。

興味あるけど、手を出していないという方はぜひお試しください!