About, 404 Page not found

About

export default {
  namespaced: true,
  state: () => ({
    name: 'Skye',
    email: 'hkim7095@gmail.com',
    blog: 'https://skye-coding.tistory.com/',
    phone: '+82-1234-5678',
    image: ''
  })
}

store폴더 안에 about.js내용입니다. image 경로를 설정하면 됩니다.

<template>
  <div class="about">
    <div class="logo">
      <Loader
        v-if="imageLoading"
        absolute />
      <img :src="image" :alt="name">
    </div>
    <div class="name">{{ name }}</div>
    <div>{{ email }}</div>
    <div>{{ blog }}</div>
    <div>{{ phone }}</div>
  </div>
</template>

routes폴더 안에 About.vue의 template내용입니다.

loading 애니메이션을 추가할 생각입니다.

<script>
import Loader from '~/components/Loader';

export default {
  components: {
    Loader
  },
  data() {
    return {
      imageLoading: true
    }
  },
  computed: {
    image() {
      return this.$store.state.about.image
    },
    name() {
      return this.$store.state.about.name
    },
    email() {
      return this.$store.state.about.email
    },
    blog() {
      return this.$store.state.about.blog
    },
    phone() {
      return this.$store.state.about.phone
    }
  },
  mounted(){
    this.init()
  },
  methods: {
    async init() {
      await this.$loadImage(this.image)
      this.imageLoading = false
    }
  }
}
</script>

routes폴더 안에 About.vue의 script내용입니다.

<style lang="scss">
@import '~/scss/main';

.about {
  text-align: center;
  .logo {
    width: 250px;
    height: 250px;
    margin: 40px auto 20px;
    padding: 30px;
    border: 10px solid $gray-300;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: $gray-200;
    position: relative;
    img {
      width: 100%;
      padding: 10px;
    }
  }
  .name {
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 20px;
  }
}
</style>

routes폴더 안에 About.vue의 style내용입니다.

 

404 Page not found

routes폴더 안에 index.js에 NotFound를 import합니다.

 

<template>
  <div class="not-found">
    <div class="status">
      404
    </div>
    <div class="message">
      Page Not Found!
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import '~/scss/main';

.not-found {
  line-height: 1.2;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  padding: 80px 20px;
  .status {
    font-size: 160px;
    color: $primary;
  }
  .message {
    font-size: 50px;
  }
}
</style>

routes폴더 안에 NotFound.vue를 만들고 위와 같이 작성하면 됩니다.