Vuetifyの環境を構築してみた

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

Vueプロジェクトの作成

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

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

npm install -g @vue/CLI

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

npm list -g vue

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

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

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

vue create [プロジェクト名]

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

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が実行されます。

・・・
🎉  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の初期面が表示されます。

Vuetifyの構築

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

vue add vuetify

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

? 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のデフォルト画面が表示されます。

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

参考URL

• https://vuetifyjs.com/ja/getting-started/installation/