Vuetify のセットアップと罠

# やること

基本下記と同じです。vuecli まわりでつまずいたので、そのへん追記してます。

- [Vuetifyに入門する](https://qiita.com/azukiazusa/items/16ebffd361af8fa58333)

# いろいろバージョン

npm などのバージョンは以下の通りでした。

```
$ npm -v
7.20.6
$ yarn -v
1.22.11
$ node -v
v14.17.3
```

# vue cli のバージョン確認

```
$ vue create vuetify-project
```

これを実行したとき、私の環境では You may want to run the following to upgrade to Vue CLI 3 みたいなことを言われました。これを回避するには、下記のようにする必要がありました。

```
$ sudo npm uninstall vue-cli -g
$ sudo yarn global add @vue-cli
```
このとき、何らかの理由で先に `package.json` が作成されていて、vue のバージョン指定がされていると、何度やっても vue cli 2 がインストールされたりします。うまくいかないときは `package.json` を見るべき。

```
$ vue --version
@vue/cli 4.5.13
```

こんな感じでバージョンが 3 以上になっていれば大丈夫（多分）。

# プロジェクトの作成

```
$ vue create vuetify-project
Vue CLI v4.5.13
? Please pick a preset: Default ([Vue 2] babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn
・・・たくさんログが出る
$ cd vuetify-project
$ vue add vuetify
・・・たくさんログがでる
```

途中でエラーが出てなければ、うまくいってるはず。` WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.` みたいなことを言われたら、commit するなら Yes を選び、しなくてもよければ No を選べばいいぽい。

# 動作テスト

```
$ yarn serve
・・・ログがでる
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://127.0.0.1:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
```

こうなったらブラウザで `http://localhost:8080/` にアクセスする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/2b718f0b-4cfd-a95a-b068-a7a349968eec.png)

この画面がでたら、うまくいってます。

# いろいろ

## firebase + vue + vuetify の場合

```
$ vue create vuetify-sample
$ cd vuetify-sample
$ vue add vuetify
$ firebase init hosting
public の代わりに dist を指定する
$ yarn build
$ firebase deploy
```
## v-icon が表示されない

- [Vuetify v-iconが表示されない](https://qiita.com/buto/items/eb6bdd3391a1edcb73c4)

公式リファレンスの `v-btn` のところにも書いてほしい。

## Material Design Icons (mdi-xxxx)

v-icon とかで指定する mdi-xxxx というアイコン名で、何が使えるのかは下記を見るとわかる。

- [Material Design Icons](https://materialdesignicons.com/) 

`mdi-` の後ろにアイコン名をつける。タグとかエイリアスではなくてアイコン名。これ重要。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/7e5cbf48-11f1-0596-d8d0-2b84f9034be5.png)

たとえば、これなら `mdi-cog` とする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/6aa36458-6c63-941a-1f03-e794f851487f.png)

これは `mdi-cog-outline` とする。Tags に Settings とか書いてあるけど、それはアイコン名ではない。

# img や v-img の画像ファイルの参照

結論的にいうと、`require()` を使えばうまくいく（いった）。

```.vue
<template>
  <v-app id="inspire">
      <v-img 
        class="img"
        :src="hoge"
        width="100%">
      </v-img>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
      hoge: require("./assets/img/001.jpg"),
  }),
}
</script>
```

下記を参照のこと。

- [【Vue.js】なぜかimgが表示されない時の解決法とその理由](https://greko-engineer.hateblo.jp/entry/2020/03/05/231242)
- [Vue.jsでimgタグのsrcをバインドさせる際の注意点](http://tk2000ex.blogspot.com/2017/11/vue.html)

## vue-router を使う場合のパスの参照

`href` ではだめで `to` を使う。

```.vue
<v-btn to="/settings">Settings</v-btn>
```

こんな感じ。`https//` とかで URL を書く場合は `href` を使う。

```.vue
<v-btn href="https://www.example.com/settings">Settings</v-btn>
```

こんなかんじ。

## v-container は使わない？

`v-main` を使えと言われる。