サルでもわかるWEBプログラミング

CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。

1. Add Dependencyから、Vuetifyをインストール
2. index.htmlの編集
3. src/main.jsの編集

例えば、src/App.vueを以下のように編集すると、ヘッダーとフッターが表示される。

参考：https://vuetifyjs.com/ja/examples/layouts/baseline

https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/footer/companyFooter.vue

以下のような感じになる。

src/App.vue

https://qiita.com/nobu-maple/items/43c1228b8f04837d753b#４home-コンポーネント作成

こちらのサイトのテンプレートを転記させて頂きます。

(引用ここから)

<template>
  <v-content>
    <v-container fluid fill-height>
      <v-layout justify-center fluid>
        <v-flex xs12 offset-mx5>
          Home Component.
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</template>

<script>
  export default {
    data: () => ({
    }),

    props: {
    },

    created() {
      console.log('Home Component created.')
      this.initialize()
    },

    mounted() {
      console.log('Home Component mounted.')
    },

    methods: {
      initialize: function() {
      },
    },

  }
</script>

(引用ここまで)

https://vuetifyjs.com/ja/