Vuetifyをインストールして使ってみる

## 概要
ページャーを作ってみたいなと調べていたら、気になったので使ってみる。

## 準備
vue-cli3.x系でのインストールも試したかったので、vue-cliを3.x系に更新する。
※2.x系も今まで通り使いたかったので、cli-initも追加しておく。

```shell:ターミナル
# vue-cli 3.x系をインストール
$ npm install -g @vue/cli
$ npm install -g @vue/cli-init
```

## vue-cli 3.x系でインストール
```shell:ターミナル
# プロジェクト作成
$ vue create my-app
$ cd my-app

# vuetifyをインストール
$ vue add vuetify
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font md
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? No
? Use babel/polyfill? Yes
? Select locale en
```

## サーバ起動
結構、見た目がいきなり変わってビックリ（＾＾；）。

```shell:ターミナル
$ npm run serve
```
![test.png](https://qiita-image-store.s3.amazonaws.com/0/142279/676395e5-773e-1a62-da9e-26fd3d209259.png)

## vue-cli 2.x系でインストール
```shell:ターミナル
# プロジェクト作成
$ vue init webpackmy-app 
$ cd my-app 

# vuetifyをインストール
$ npm install ajv@^6.0.0 --save
$ npm install vuetify --save
$ npm install material-design-icons-iconfont --save
$ npm install @mdi/font --save
```

main.jsでインポートして展開する。

```js:main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify);
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});
```
HelloWorld.vueの中身をサンプルコード（layouts/dark.vue）に差し替えてみる。
https://github.com/vuetifyjs/vuetifyjs.com/tree/dev/src/examples

```vue:HelloWorld.vue
<template>
  <v-app id="inspire" dark>
    <v-navigation-drawer
      v-model="drawer"
      clipped
      fixed
      app
    >
      <v-list dense>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>dashboard</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Dashboard</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile @click="">
          <v-list-tile-action>
            <v-icon>settings</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Settings</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app fixed clipped-left>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Application</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center>
          <v-flex shrink>
            <v-tooltip right>
              <v-btn
                slot="activator"
                :href="source"
                icon
                large
                target="_blank"
              >
                <v-icon large>code</v-icon>
              </v-btn>
              <span>Source</span>
            </v-tooltip>
            <v-tooltip right>
              <v-btn slot="activator" icon large href="https://codepen.io/johnjleider/pen/qxQWda" target="_blank">
                <v-icon large>mdi-codepen</v-icon>
              </v-btn>
              <span>Codepen</span>
            </v-tooltip>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer app fixed>
      <span>&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      drawer: true
    }),
    props: {
      source: String
    }
  }
</script>
```

## サーバ起動
```shell:ターミナル
$ npm run dev

下記ページが見れました。

```
![vuetify.png](https://qiita-image-store.s3.amazonaws.com/0/142279/a66a448c-f5e2-2814-449a-570c9511e299.png)

以上

## 参考サイト
* [Vuetify - Quick Start](https://vuetifyjs.com/ja/getting-started/quick-start)
* [Vue Cli3 - Pulling 2.x Templates (Legacy)](https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui)
* [GitHub - Vuetify/examples](https://github.com/vuetifyjs/vuetifyjs.com/tree/dev/src/examples)
* [Vuetify color theme builder](https://lobotuerto.com/thingies/vuetify-color-theme-builder/)
* [Vuetify icons](https://vuetifyjs.com/ja/framework/icons)
* [Vuetify theme](https://vuetifyjs.com/ja/style/theme)