vue-cli環境にVuetifyを導入する方法

Material UI, vue-cli, Vue.js, Vuetify, Web, ライブラリ

vue-cli(4.2.3)で作っているアプリに何かUIライブラリを導入してみようと思い、Vuetifyを入れてみることにした。

自分でボタンやinputなどのスタイル設計をしてきたけど、やはり効率が悪いし、何より馴染みのある操作性を自分で実現するのは思っていたより難しい。

公式によるVuetifyのざっくりとした説明(原文):

Vuetifyは、美しく手作りされたマテリアルコンポーネントを備えたVue UIライブラリです。設計スキルは必要ありません。素晴らしいアプリケーションを作成するために必要なものはすべて手元にあります。

ここのページとかにVuetifyの各種コンポーネントのサンプルが載っているけど、視認性などなかなか良さそうだ。

さっそく導入してみよう。


注意

既にあるvue-cliプロジェクトにVuetifyを導入すると、App.vueファイルの中身が勝手にVuetifyのサンプルコードに書き換えられてしまうので、自分が作ってきたコードのバックアップは必ずとっておくこと。


プロジェクトのルートディレクトリ(package.jsonがあるディレクトリ)で、次のコマンドを実行してみた。

vue add vuetify

すると、「yarnが入ってないよ。yarnをインストールしてね」(英語)というエラーが発生してVuetifyのインストールが失敗した。

そこで次のコマンドを実行し、グローバルにYarnをインストールした。

npm i -g yarn

で、再び次のコマンドを実行した。

vue add vuetify

インストールできた。めでたしめでたし。