개요

웹 초보자가 Vue.js에서 포트폴리오를 만들어 보았습니다.
2019/2/26 반응형 대응하지 않으므로 주의

준비

이전에 쓴 기사 참조

제작물

포트폴리오 사이트
github

먼저 컴포넌트를 만들자

우선 모든 페이지 공통으로 사용하는 것을 컴퍼넌트로 준비하면 좋을까요?
라는 가벼운 기분으로 작성.

헤더

Header.vue

<template>
  <div>
    <header class="header">
      <router-link to="/">Top</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/career">Career</router-link>
      <router-link to="/portfolio">Portfolio</router-link>
      <router-link to="/contact">Contact</router-link>
    </header>
  </div>
</template>

페이지 타이틀 (화면마다 문장이 바뀌므로 props를 설정)

Pagetitle.vue

<template>
  <div class="pagetitle">
    <p> {{pagetitle}} </p>
  </div>
</template>

<script>
export default{
  name:'pagetitle',
  props:{
    pagetitle:{
      type:String,
      default:''
    }
  }
}
</script>

헤더는 화면에 따라 문장이나 디자인이 바뀔 필요가 없으므로 App.vue에 기재

App.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view/>
  </div>
</template>

<script>
import Header from '@/components/Header'

export default{
  name:'header',
  components:{
    Header
  }
}
</script>

페이지 만들기

HTML과 CSS로 페이지를 만듭니다.
작성한 페이지 타이틀 컴퍼넌트에 인수를 넣어 호출한다.

상단 화면

Top.vue

<template>
  <div class="top">
    <Pagetitle pagetitle='Top'></Pagetitle>
    <p id="text">Doragon's Portfolio</p>
  </div>
</template>

<script>
import Pagetitle from '@/components/Pagetitle.vue'

export default{
  name:'top',
  components:{
    Pagetitle
  }
}
</script>

Router

작성한 페이지를 Router로 설정.

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Top from './pages/Top.vue'
import About from './pages/About.vue'
import Career from './pages/Career.vue'
import Contact from './pages/Contact.vue'
import Portfolio from './pages/Portfolio.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'top',
      component: Top
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/career',
      name: 'career',
      component: Career
    },
    {
      path: '/portfolio',
      name: 'portfolio',
      component: Portfolio
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
})

main.js에 router 선언을 잊지 마세요.

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

만든 포트폴리오 게시

이번에는 github pages에 배포합니다.
소스 코드를 공개하는 대신 무료로 웹 페이지를 공개해주는 부드러운 녀석.

vue.config.js를 디렉토리 바로 아래에 작성
이대로 build하면/dist 바로 아래에 빌드 파일이 작성되어 버린다.
github pages에서는/docs 바로 아래의 것이 공개 대상이 되므로 설정을 변경한다.

vue.config.js

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/portfolio/'
    : '/',
  outputDir: 'docs',
};

명령줄에서 빌드하기

$npm run build

github
/docs 바로 아래에 빌드된 파일이 작성되었는지 확인한 후 master에 push.
github의 setting을 다음과 같이 한다.

반영까지 조금 시간이 걸리므로 주의
참을성이 있는 사람은 아래의 기사를 참고해 주세요.
htps : // m / sh / ms / a c20f45c9 e8 0b4f33c

한마디

반응형 대응이 아직 되어 있지 않기 때문에 나중에 합니다・・・.
SASS도 사용하고 싶었지만 전혀 사용하고 있지 않습니다.
HTML과 CSS와 JS는 아직 초보자 수준이므로 수행이 필요하다고 통감했다.
Node.js도 공부하고 웹에 강해지고 싶다.

참고문헌

htps : // 이 m / p ぅ s_Koo / / ms / A 01578b782f17f573510
htps : // m / sh / ms / a c20f45c9 e8 0b4f33c