기능이 들어가지 않는 about 페이지를 만들겠습니다.
메인과 공통으로 사용합니다.
이전에 라우터 설정에서 about 페이지는 /components/page/about.vue 파일을 사용합니다.

1.About

<template>
    <div class="about">
        <h2 class="comm__title">ABOUT</h2>
        <p class="comm__desc">
            이 프로젝트는 Todo Project 입니다.<br>
            회원 가입을 하고 Todo를 등록하고 관리할 수 있습니다.<br>
            이 프로젝트는 Node Express + VueJS + Mysql 을 학습하기 위해 만들었습니다.<br><br>
            <a href="http://gameb.co.kr" target="_blank">gameb.co.kr</a>
        </p>
    </div>
</template>
<script></script>
<style></style>

특별한 스크립트나 스타일은 없습니다.
추가로 공통 css는 index.html에서 직접 link 방식을 통해서 사용합니다.
물론 컨텐츠 페이지별로 작성해도 됩니다.

2.페이지 구조

컨텐츠 페이지, 기능 페이지 모든 구조는 위와 같은 형태를 가집니다.

<div class="페이지나 기능명">
    <h2 class="comm__title">페이지명</h2>
    ...
</div>

login 페이지 구조 예시

    <div class="login">
        <h2 class="comm__title">LOGIN</h2>
        <div class="ipt__box">
            <input type="text" ref="tit" class="ipt" placeholder="ID">
        </div>
        <div class="ipt__box">
            <input type="password" class="ipt" placeholder="Password">
        </div>
        <div class="ipt__btn">
            <a href="#" class="btn btn--confirm btn--large" v-on:click="login()">LOGIN</a>
        </div>
    </div>

다음 코딩할 로그인 페이지 구조 예시입니다.
페이지에 따라서 타이틀 아래의 컨텐츠를 div로 묶어줄 수 있습니다.