소개

아직 큰 내용을 할 수는 없지만, 최소한의 페이지를 작성했으므로, 공개합니다.
외형과 내용은 앞으로 조정할 것입니다.
GitHub Pages에서 공개했습니다.

포트폴리오
GitHub : htps : // 기주 b. 코 m / 미누로 / 포 rt 후오

환경 구축

아래 기사에서 쓴 내용으로 환경을 구축했습니다.
Vue.js의 환경 구축

Vuetify

이번에는 Vuetify를 도입했습니다.
이것은 Vue.js용 머티리얼 디자인 프레임워크입니다.
vue 프로젝트의 디렉토리로 이동한 후 다음 명령으로 도입할 수 있습니다.
여러가지 듣습니다만, 특히 고집하지 않으면 엔터로 괜찮습니다.

vue add vuetify

기본 만드는 법

간단하게 만드는 방법을 기재해 둡니다.
※이하의 소스는 어느 정도 생략하고 있습니다.

루트 만들기

src/router.js 에 페이지를 기재합니다.
예를 들면 다음과 같이 기재합니다.

src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Top from './views/Top.vue' //importを追加
import About from './views/About.vue' //importを追加

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [ //routesを追加
    {
      path: '/',      //url
      name: 'top',    //ページ名
      component: Top  //コンポーネント指定
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
 ]
})

루트 경로에서 views/Top.vue 에 액세스할 수 있고 ルート/about 의 경로에서 views/About.vue 에 액세스할 수 있습니다.

디스플레이 만들기

src/App.vue 와 같이, router-view 를 기재한 개소에, 방금 전 루트로 지정한 컴퍼넌트의 내용이 표시됩니다.

또한 루트를 바꿀 때는 router-link 에 기재된 링크로부터 천이할 수 있습니다.
이름에 루트에 지정된 이름을 나열합니다.

<router-link :to="{ name: 'about' }">

구성 요소 만들기

template 태그 안에 내용을 기재합니다.v- 로 된 태그는 Vuetify 태그이며, 자세한 것은 문서에 쓰여져 있습니다.
Grid system — Vuetify.js
text-xs-center 이나 justify-center 는 내용을 중심으로 하고,row 는 요소를 가로로 정렬하고 wrap 는 가로로 들어가지 않을 때 줄 바꿈을 수행합니다.xs12 등은 가로 폭의 지정이 됩니다.

<template>
  <v-container text-xs-center>
    <v-layout row wrap justify-center>
      <v-flex xs12>
        <h1>About</h1>
      </v-flex>
    </v-layout>
  </v-container>
</template>

GitHub Pages

빌드

파일을 만든 후에는 npm run build 명령을 실행하여 프로젝트를 빌드합니다.
이렇게하면 빌드 파일이 기본값이면 dist 디렉터리에 만들어집니다.
그러나 GitHub Pages에서 게시하려면 docs 디렉터리를 만들어야 합니다.
따라서 다음과 같이 설정을 수정합니다.

먼저 프로젝트 바로 아래에 vue.config.js라는 파일을 만듭니다.
그 안에, 이하의 내용을 기재합니다.

vue.config.js

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
      ? '/"プロジェクト名"/' //ここは各自のプロジェクト名を入力します。
      : '/',
    outputDir: 'docs',
  }

이것은, 프로덕션 환경시는 /"プロジェクト名"/ 라고 하는 패스로 파일에 액세스 해, 빌드 파일의 출력처 디렉토리를 docs 로 한다고 하는 것과 같은 내용입니다.

위 설정을 완료한 후 npm run build 를 실행합니다.

GitHub Pages 설정

빌드를 실행하여 만든 docs 디렉터리를 master 브랜치로 푸시합니다.

GiuHub에서 해당 리포지토리의 Setting 열의 중간에 GitHub Pages라는 열이 있으므로 아래와 같이 Source 열에서 master branch/docs folder를 선택합니다.


반영되면 https://"ユーザー名".github.io/"リポジトリ名"/ 의 URL로 액세스 할 수 있게 됩니다.