「vuetify」をご存知でしょうか。
Googleが「マテリアルデザイン」というフレーズを広めていますが、実際のプロジェクトに適用した経験がある方はまだまだ珍しいのではないでしょうか。
特に業務系システムならではかもしれませんが、プロジェクトには色々な制約があり、中々先進的なデザインを導入するのには皆さん抵抗があるようで、結局表面上のデザインはレガシーなままで開発を進めることも多く経験しました。
ただ、世の中的には「マテリアルデザイン」をベースにしたWebサイトを多く見ますし、フレームワークも数多く登場しています。
そこで今回はお勉強がてらVue.js + vuetify + Webpackという簡単な構成でサンプル画面を作成してみたいと思います。
目次
前提条件
- 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」を使ってみました。
はじめて触ったのですが、公式サイトのチュートリアルが手厚いので困ることもありませんでした。
興味あるけど、手を出していないという方はぜひお試しください！