前提のはなし
今回はVuetifyを導入して起動してみます。
前提として、前回のVue CLIの導入ができている状態で始めます。
まだの方は以下リンクに手順をまとめています。
Vuetifyとは
VuetifyはGoogleが2014年に提唱したマテリアルデザインに沿って設計されたUI(User Interface)のひとつです。
シンプルでかつ見やすいUIを作成することができます。
公式サイトもどうぞ。
Vuetifyの導入手順
タイトルにあるように5分でできます。
まずは前回のVue CLIで作成したVueのプロジェクトに移動します。
cd ○○
Vuetifyのインストール
こちらのコマンドでvuetifyをインストールします。
vue add vuetify
Choose a preset
インストールが進んだら画像のようになるのでDefaultを選択します。
このままエラーが発生せずにインストールが完了したら完了です。
5分もいらないですね。
エラーが発生した場合
私が導入したときは画像のようなエラーが発生しました。
error Component name "Home" should always be multi-word vue/multi-word-component-names
コンポーネントの名前が問題だったようなので、こちらの対処方法で解決させました。
Vuetifyの起動
インストールが完了したら起動するか確認します。
npm run servey
青いサイトページが表示され、動くのを確認できました!