Vue.js Vuetifyを利用してみる

Vue.js Vuetifyを利用してみる

Vue.jsのフレームワークで、マテリアルデザインを容易に利用できるVuetifyの利用手順と、ちょっとしたサンプルコードを記載

環境

  • OS  Ubuntu19.10
  • Vue.js @vue/cli 4.0.5

vue/cli のインストール

Vue/cliがインストールされてない場合はインストールする

Vueプロジェクトの作成

sampleというプロジェクトを作成します

Vuetifyのインストール

プロジェクトに移動して、Vuetifyをインストールします

とりあえず、起動してみる

ブラウザから http://プライベートIP:8080 にアクセスすると下記の画面が表示される

ソースコードを確認

topページのレイアウトは、/sample/src/components内のHelloWorld.vueから確認できます。

v-layoutとv-flexについて

Vuetifyは、ソースを見れば分かる通り、これらを組みあせて、12分割のグリッドシステムを実現しています。

詳細はこちらの公式サイトに記載されてます。

試しに HelloWorld.vue に下記箇所にコードを追加すると

下図のように表示されます

カレンダーも追加してみる

HelloWorld.vue に下記箇所にコードを追加

追加すると下図のようにカレンダーが表示されます

公式サイトに様々なサンプルがあるので、試して覚えていく予定です。