Vuetifyの環境を構築してみた

Vueプロジェクトを作成後に、Vuetifyを組み込んでみましたので、
Vue.jsの導入から、Vuetifyの初期画面が表示されるまでの手順を記載します。

# Vueプロジェクトの作成

まずはVue.jsの環境を構築します。
今回はnpmを使って作成していきます。

Vue CLIをインストールします。

```bash
npm install -g @vue/CLI
```

ちなみに、VueCLIがインストールされているか確認するには以下を実行します。（`-g`はグローバルの場合）

```bash
npm list -g vue
```

Vue CLIがインストールされている場合は以下のように出力されます。

```bash
/usr/local/lib
└─┬ @vue/cli@4.5.15
  └── vue@2.6.14
```

Vueプロジェクトを作成します。

```bash
vue create [プロジェクト名]
```

Vueのバージョン選択が表示されます。
Vuetifyが執筆時点ではVue 3はAlpha版のため、Vue 2を選択しました。

```bash
Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features
```

プロジェクト作成成功です。
表示されている通り、コマンドを入力すればVue.jsが実行されます。

```bash
・・・
🎉  Successfully created project vue-test-pj.
👉  Get started with the following commands:

 $ cd vue-test-pj
 $ npm run serve
```
`npm run serve`を実行し、`App running at`に表示されているURLにアクセスすると、Vueの初期面が表示されます。

|![スクリーンショット 2022-02-14 19.28.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529227/43e65391-0381-77f3-be4b-69f4ae416945.png)|
|:--|

# Vuetifyの構築

続いてVuetifyの構築をします。
プロジェクトにVuetifyを追加します。

```bash
vue add vuetify
```

選択画面が表示されますので、Defaultを選択しました。

```bash
? Choose a preset: (Use arrow keys)
  Configure (advanced) 
❯ Default (recommended) 
  Vite Preview (Vuetify 3 + Vite) 
  Prototype (rapid development) 
  Vuetify 3 Preview (Vuetify 3)
```

Vuetifyの組み込みが成功すると、package.jsonにvuetifyが追加されます。

```
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vuetify": "^2.4.0"
  },
```

`vue add vuetify`で追加した場合はsrc/plugins配下にvuetify.jsが追加されます。

```src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
});
```

main.jsを確認するとVuetifyが組み込まれていることがわかります。

```src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')
```

またApp.vueを見るとデフォルトの画面がVuetifyのものに変更されています。

```src/App.vue
<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>
```

再度`npm run serve`を実行するとVuetifyのデフォルト画面が表示されます。

|![Vuetify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529227/b04511ba-a3fb-441a-b9fe-bdf197ceb3b5.png)|
|:--|

以上でVueの構築からVuetifyの組み込みまでできました。

### 参考URL
* https://vuetifyjs.com/ja/getting-started/installation/