Vue.jsのUIフレームワークに 「Vuetify.js」 がある。Webアプリを作っているときに、CSSがうまく表現できなかったのでUIフレームワークとして導入してみた。その導入する際に、0からインストールする方法と現在走っているプロジェクトに導入する方法で異なる点があったのでまとめる。

インストール

まずはnpm install vuetify --saveかyarn add vuetifyを実行し 「Vuetify.js」 をインストールする。ここから新規プロジェクトに導入する場合と、既存のプロジェクトに適応する場合で少し異なるので注意が必要。自分が既存のプロジェクトに適応されるときにミスをしたので同じミスをしてほしくない思いから既存プロジェクトに適応する方法を先に書く。

既存プロジェクトに適応させる

「Vuetify.js」 のインストールが終わったら、index.jsかmain.jsに次の記述しをする。Vue.useメソッドで 「Vuetify.js」 をプラグインとして利用する宣言をする。

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

「Vuetify.js」 のCSSファイルを読み込ませるためにindex.jsかmain.jsへ次の記述をする。

import 'vuetify/dist/vuetify.min.css'

最後にindex.htmlに次のフォントを読み込ませて終了。

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

新規プロジェクトで導入する

vue create pg-vuetifyを実行し、Vueの環境を作成する。今回は導入することを優先するので、デフォルトで進める。作成した環境に移動しvue add vuetifyを実行し、 「Vuetify.js」 を導入する。 「Vuetify.js」 を導入する際もデフォルトの設定で実施する。無事に環境が作成されると次のファイルが作成・更新される。

.gitignore
README.md
babel.config.js
package.json
public/favicon.ico
public/index.html
src/App.vue
src/assets/logo.png
src/assets/logo.svg
src/components/HelloWorld.vue
src/main.js
src/plugins/vuetify.js
yarn.lock

今回の記事の中で、既存プロジェクトに導入する手順を最初に書いたのはファイルが更新されてしまうのが理由であった。gitでバージョン管理をしていればファイルが更新されてもあまり心配はないかもしれないが、バージョン管理をしていないときは注意が必要。