Vue.js + Vuex + VuetifyとFirebaseでSPAを作る(その1)

npm install -g @vue/cli

vue create hedgehog-proud

 bash vue ui

vue add vuetify

<template>
    <v-app>
        <v-content transition="slide-x-transition">
            <router-view></router-view>
        </v-content>
    </v-app>
</template>

<script>
export default {
    name: 'App'
};
</script>

<style>
</style>

<template>

</template>

<script>
export default {
    name: 'AppNavigation'
};
</script>

<style scoped>
</style>

<template>
  <v-toolbar app color="brown darken-4" dark>
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title>{{appTitle}}</v-toolbar-title>
    <v-btn flat>Menu</v-btn>
    <v-spacer></v-spacer>
    <v-btn flat>SIGN IN</v-btn>
    <v-btn color="brown lighten-3">JOIN</v-btn>
  </v-toolbar>
</template>

<v-toolbar app color="brown darken-4" dark>
    <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
    <v-spacer class="hidden-md-and-up"></v-spacer>
    <v-toolbar-title>{{appTitle}}</v-toolbar-title>
    <v-btn flat class="hidden-sm-and-down">Menu</v-btn>
    <v-spacer class="hidden-sm-and-down"></v-spacer>
    <v-btn flat class="hidden-sm-and-down">SIGN IN</v-btn>
    <v-btn color="brown lighten-3" class="hidden-sm-and-down">JOIN</v-btn>
</v-toolbar>

<template>
    <span>
        <v-navigation-drawer app v-model="drawer" class="brown lighten-2" dark disable-resize-watcher>
            <v-list>
                <template v-for="(item, index) in items">
                    <v-list-tile :key="index">
                        <v-list-tile-content>
                            {{item.title}}
                        </v-list-tile-content>
                    </v-list-tile>
                    <v-divider :key="`divider-${index}`"></v-divider>
                </template>
            </v-list>
        </v-navigation-drawer>
        <v-toolbar app color="brown darken-4" dark>
            <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
            <v-spacer class="hidden-md-and-up"></v-spacer>
            <v-toolbar-title>{{appTitle}}</v-toolbar-title>
            <v-btn flat class="hidden-sm-and-down">Menu</v-btn>
            <v-spacer class="hidden-sm-and-down"></v-spacer>
            <v-btn flat class="hidden-sm-and-down">SIGN IN</v-btn>
            <v-btn color="brown lighten-3" class="hidden-sm-and-down">JOIN</v-btn>
        </v-toolbar>
    </span>
</template>

<script>
export default {
    name: 'AppNavigation',
    data() {
        return {
            appTitle: 'ハリネズミ🦔',
            drawer: false,
            items: [
                { title: 'Menu' },
                { title: 'Sign In' },
                { title: 'Join' }
            ]
        };
    }
};
</script>

<style scoped>
</style>

export default {
    name: 'AppNavigation',
    data() {
        return {
            appTitle: 'ハリネズミ🦔',
            drawer: false,
            items: [
                { title: 'Menu' },
                { title: 'Sign In' },
                { title: 'Join' }
            ]
        };
    }
};

<template>
    <v-app>
        <app-navigation></app-navigation>

        <v-content transition="slide-x-transition">
            <router-view></router-view>
        </v-content>
    </v-app>
</template>

<script>
import AppNavigation from '@/components/AppNavigation';

export default {
    name: 'App',
    components: {
        AppNavigation
    }
};
</script>

<style>
</style>

<template>
  <v-container fluid fill-height class="home-hero" style="max-height: 100vh;">
    <v-layout justify-center align-center column pa-5>
      <div class="display-4 font-weight-black white--text text-xs-center">HEDGEHOG</div>
      <div class="display-4 font-weight-black white--text text-xs-center mb-3">FOR YOUR LIFE</div>
      <div class="display-1 font-weight-bold white--text text-xs-center">They are so cute!</div>
      <v-btn fab class="mt-5 brown darken-4">
        <v-icon large color="white">🦔</v-icon>
      </v-btn>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  name: "HomeHero"
};
</script>

<style scoped>
.home-hero {
  background: url("https://nmomos.com/wp-content/uploads/2019/08/fullsizeoutput_9ae.jpeg");
  background-size: cover;
  width: 100%;
  height: 100%;
}
</style>

<template>
    <span>
        <home-hero></home-hero>
    </span>
</template>

<script>
import HomeHero from '@/components/HomeHero';

export default {
    name: 'home',
    components: {
        HomeHero
    }
};
</script>

<template>
  <v-container fluid class="brown lighten-4">
    <v-container grid-list-lg>
      <v-layout column>
        <v-flex
          class="display-2 font-weight-black brown--text text-xs-center my-5"
        >What kind of animal is a hedgehog?</v-flex>
        <v-flex>
          <div class="headline mt-3 brown--text font-weight-bold">Physical description</div>
          <p class="subheading mt-3">
            Hedgehogs are easily recognized by their spines, which are hollow hairs made stiff with keratin.[5] Their spines are not poisonous or barbed and, unlike the quills of a porcupine, do not easily detach from their bodies. However, the immature animal's spines normally fall out as they are replaced with adult spines. This is called "quilling". Spines can also shed when the animal is diseased or under extreme stress. Hedgehogs are usually brown, with pale tips to the spines, though blonde hedgehogs are found on the UK island of Alderney.
            A skin-skeletal preparation
            Close-up of the last 5 mm of a hedgehog spine
            All species of hedgehogs can roll into a tight ball in self-defense, causing all of the spines to point outwards. The hedgehog's back contains two large muscles that control the position of the quills. When the creature is rolled into a ball, the quills on the back protect the tucked face, feet, and belly, which are not quilled.
          </p>
        </v-flex>
      </v-layout>
    </v-container>
  </v-container>
</template>

<script>
export default {
  name: "HomeDetails"
};
</script>

<style scoped>
</style>

<template>
    <span>
        <home-hero></home-hero>
        <home-details></home-details>
    </span>
</template>

<script>
import HomeHero from '@/components/HomeHero';
import HomeDetails from '@/components/HomeDetails';

export default {
    name: 'home',
    components: {
        HomeHero,
        HomeDetails
    }
};
</script>

<template>
  <v-container grid-list-lg>
    <v-layout row>
      <v-flex
        xs12
        class="text-xs-center display-1 font-weight-black my-5"
      >THE DOMINANT WHITE-BELLIED HEDGEHOG COLORS</v-flex>
    </v-layout>
    <v-layout row wrap class="meal-plans">
      <v-flex xs12 sm12 md4>
        <v-card>
          <v-responsive>
            <v-img
              src="https://nmomos.com/wp-content/uploads/2019/08/IMG_3978-768x768.jpg"
              height="500px"
            >
              <v-container fill-height fluid>
                <v-layout fill-height>
                  <v-flex xs12 align-end flexbox>
                    <span class="headline white--text">SALT & PEPPER</span>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-img>
          </v-responsive>

          <v-card-text>
            <div>
              <h3 class="headline mb-0">SALT & PEPPER</h3>
              <div>
                The spines are white, banded with black.
                No more than 5% of the quills are to be solid white.
                The face is white with a black mask, ears and nose.
                The underbody hair is white
                Black mottling of the underbelly is extensive.
                Skin on the shoulders is jet-black.
                The nose is black.
              </div>
            </div>
          </v-card-text>
        </v-card>
      </v-flex>

      <v-flex xs12 sm12 md4>
        <v-card>
          <v-responsive>
            <v-img
              src="https://nmomos.com/wp-content/uploads/2019/08/IMG_0825-1-768x768.jpg"
              height="500px"
            >
              <v-container fill-height fluid>
                <v-layout fill-height>
                  <v-flex xs12 align-end flexbox>
                    <span class="headline white--text">CINNAMON</span>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-img>
          </v-responsive>

          <v-card-text>
            <div>
              <h3 class="headline mb-0">CINNAMON</h3>
              <div>
                Spines are white, banded by light cinnamon brown.
                No more than 5% of the spines are to be solid white.
                The face is not masked.
                The underbelly is white and mottling of the skin is not preferred.
                Skin on the shoulders is pink.
                The nose is liver.
              </div>
            </div>
          </v-card-text>
        </v-card>
      </v-flex>

      <v-flex xs12 sm12 md4>
        <v-card>
          <v-responsive>
            <v-img
              src="https://nmomos.com/wp-content/uploads/2019/08/IMG_4001-768x768.jpg"
              height="500px"
            >
              <v-container fill-height fluid>
                <v-layout fill-height>
                  <v-flex xs12 align-end flexbox>
                    <span class="headline white--text">APRICOT</span>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-img>
          </v-responsive>

          <v-card-text>
            <div>
              <h3 class="headline mb-0">APRICOT</h3>
              <div>
                Spines are white, banded by pale orange-beige.
                The underbody is white.
                The face is not masked.
                The eyes are ruby-red.
                The nose is pink.
                <br />
                <br />
                <br />
              </div>
            </div>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  name: "HomePlans",
  methods: {
    showRecipes(plan) {
      this.$store.dispatch("getRecipes", plan);
    }
  }
};
</script>

<style scoped>
</style>

<template>
    <span>
        <home-hero></home-hero>
        <home-details></home-details>
        <home-plans></home-plans>
    </span>
</template>

<script>
import HomeHero from '@/components/HomeHero';
import HomeDetails from '@/components/HomeDetails';
import HomePlans from '@/components/HomePlans';

export default {
    name: 'home',
    components: {
        HomeHero,
        HomeDetails,
        HomePlans
    }
};
</script>