アルの備忘録

本棚が足りずにいいものを探しているがなかなか見つからないので困ってる系ブロガーの雑記ブログ

【導入手順】5分で簡単。VuetifyをVue CLI作成後に入れてみた!

 

前提のはなし

今回はVuetifyを導入して起動してみます。

 

前提として、前回のVue CLIの導入ができている状態で始めます。

まだの方は以下リンクに手順をまとめています。

www.matematetea.com

 

Vuetifyとは

VuetifyはGoogleが2014年に提唱したマテリアルデザインに沿って設計されたUI(User Interface)のひとつです。

シンプルでかつ見やすいUIを作成することができます。

 

公式サイトもどうぞ。

vuetifyjs.com

 

Vuetifyの導入手順

タイトルにあるように5分でできます。

まずは前回のVue CLIで作成したVueのプロジェクトに移動します。

cd ○○

 

Vuetifyのインストール

こちらのコマンドでvuetifyをインストールします。

vue add vuetify

 

Choose a preset

インストールが進んだら画像のようになるのでDefaultを選択します。

Choose a preset(Vuetify)

 

このままエラーが発生せずにインストールが完了したら完了です。

5分もいらないですね。

 

エラーが発生した場合

私が導入したときは画像のようなエラーが発生しました。

error  Component name "Home" should always be multi-word  vue/multi-word-component-names

error  Component name "Home" should always be multi-word  vue/multi-word-component-names

 

コンポーネントの名前が問題だったようなので、こちらの対処方法で解決させました。

【Vuetify導入時のエラー解決】Component name "Home" should always be multi-word vue/multi-word-component-names - アルの備忘録

 

Vuetifyの起動

インストールが完了したら起動するか確認します。

npm run servey

 

青いサイトページが表示され、動くのを確認できました!

vuetifyの起動