Vue 프로젝트 About

 

Vue 프로젝트 About

 

1. /src/store/about.js 수정

/* 개발자의 정보, 사용자의 정보 취급하는 용도 */

export default {
  namespaced: true,
  state: () => ({
    name: 'ITBlue',
    email: 'hyungjunyoo95@gmail.com',
    git: 'https://github.com/HyungJun-Yoo',
    blog: 'https://bluelearn.tistory.com/',
    image: '/src/assets/Blue.png'
  })
}

 

2. /src/routes/About.vue 수정

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

<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
    },
    git() {
      return this.$store.state.about.git
    },
    blog() {
      return this.$store.state.about.blog
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await this.$loadImage(this.image)
      this.imageLoading = false
    }
  }
}
</script>

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

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

 

결과