소개

Nuxt.js와 Contentful과 Netlify로 현대적인 (?) SPA 블로그를 만들었습니다. 여기
여러 번에 걸쳐 구축의 기록을 남기고 있는 시리즈의 제2회입니다.
이번에는 SPA 사이트를 쉽게 만들 수 있는 프레임워크인 Nuxt.js에 대해 써 갑니다.

【시리즈의 예정】
- 머리 편
- Nuxt.js편 ← 이 기사
- Contentful편
- Netlify 편

전제가 되는 지식

Vue.js 의 기본을 알고 있다고 가정합니다.
아직 한 적이 없는 분은 공식 튜토리얼 을 해 봅시다.

설치

먼저 공식 사이트에 따라 설치해 봅시다.
스크래치에서도 가능하지만, 스타터 템플릿으로 편하게합니다.
공식 사이트는 npm이므로 yarn으로 해보겠습니다. (yarn파이므로)

$ yarn add -g vue-cli
$ vue init nuxt-community/starter-template nuxt_blog
 ? Project name nuxt_blog
 ? Project description <てきとうに>
 ? Author <あなたの名前>
$ cd nuxt_blog
$ yarn install

개발 환경의 시작은

$ yarn run dev

입니다.
http://localhost:3000 로 이동하여 다음과 같이 로고와 제목이 표시되면 성공합니다.

템플릿 만들기

그럼 템플릿 페이지를 괴롭히고, 블로그풍으로 해 봅시다.
여기에서는 표준 HTML, CSS로 씁니다만, 프리프로세서를 사용하고 싶은 분은 기호로. (개인적으로는 pug+sylus를 편안하게 좋아합니다.)
이런 느낌.

leyouts/default.vue

<template>
  <div>
    <header>
      <h1 class="title">いい感じのSPAブログ</h1>
    </header>
    <main class="container">
      <nuxt/>
    </main>
  </div>
</template>

<style>
html {
  font-family: "Source Sans Pro", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
  font-size: 16px;
}
h1, h2, h3 {
  font-weight: normal;
}
.title {
  color: #35495e;
  margin: 100px 0 30px;
  text-align: center;
}
.container {
  width: 80%;
  margin: 0 auto;
}
</style>

pages/index.vue

<template>
  <section class="index">
    <card v-for="i in 5" v-bind:key="i"/>
  </section>
</template>

<script>
import Card from '~/components/card.vue'

export default {
  components: {
    Card
  }
}
</script>

<style scoped>
.index {
  display: flex;
  flex-wrap: wrap;
}
</style>

pages/blog/_slug.vue

<template>
  <section class="slug">
    <h1 class="slug_title">
      タイトル
    </h1>
    <p class="slug_date">2018/8/2</p>
    <div>
      記事の内容。あああああああああああああああああああああああああああああああああああああああ
    </div>
  </section>
</template>

<style scoped>
.slug {
  max-width: 800px;
  margin: 0 auto;
}
.slug_title {
  font-size: 2.0rem;
  font-weight: bolder;
}
.slug_date {
  font-size: 1.0rem;
  color: rgb(57, 72, 85);
  text-align: right;
}
</style>

components/card.vue

<template>
  <article class="card">
    <nuxt-link :to="{ name: 'blog-slug'}" class="wrapper">
      <h1 class="card_title">記事１</h1>
      <p class="card_text">記事の内容。ああああああああああああああああああ</p>
      <p class="card_date">2018/8/2</p>
    </nuxt-link>
  </article>
</template>

<style scoped>
.card {
  width: 300px;
  height: 200px;
  box-shadow: 1px 2px 3px 1px rgba(0,0,0,0.2);
  border: 0.5px solid rgb(57, 72, 85);
  padding: 10px 20px;
  margin: 10px 10px;
}
.wrapper {
  text-decoration: none;
}
.card_title {
  font-size: 1.2rem;
}
.card_text {
  color: rgb(57, 72, 85);
  margin: 10px 0;
}
.card_date {
  font-size: 0.7rem;
  color: rgb(57, 72, 85);
  text-align: right;
}
</style>

어쩐지 블로그의 기사 일람 같은 것이 생겼을까 생각합니다.

Markdown 불러오기

기사는 Markdown으로 쓸 수 있으면 편리하므로 vue-markdown을 넣습니다.

$ yarn add vue-markdown

vue-markdown을 블로그에 반영

pages/blog/_slug.vue

      <p class="slug_date">2018/8/2</p>
-     <div>
-       記事の内容。あああああああああああああああああああああああああああああああああああああああ
-     </div>
+     <vue-markdown>
+ # 記事の内容
+ - あいうえお
+   - あ
+   - い
+   - う
+   - え
+   - お
+ - かきくけこ
+ 本文本文本文本文本文本文本文本文本文
+     </vue-markdown>
    </section>
  </template>
+
+ <script>
+ import VueMarkdown from 'vue-markdown'
+ export default {
+   transition: 'slide-left',
+   components: {
+     VueMarkdown
+   }
+ }
+ </script>

낭비에 애니메이션을 붙인다

과연 너무 수수하다고 생각했기 때문에‥

leyouts/default.vue

  .container {
    width: 80%;
    margin: 0 auto;
  }
+ .slide-left-enter {
+   transform: translateX(2000px);
+   opacity: 0;
+ }
+ .slide-left-enter-active {
+   transition: all .3s linear;
+ }
+ .slide-left-leave-to {
+   transform: translateX(-2000px);
+   opacity: 0;
+ }
+ .slide-left-leave-active {
+   transition: all .3s linear;
+ }
  </style>

pages/index.vue

  import Card from '~/components/card.vue'
  export default {
+   transition: 'slide-left',
    components: {

pages/blog/_slug.vue

  import VueMarkdown from 'vue-markdown'
  export default {
+   transition: 'slide-left',
    components: {

도중 경과

화면이 이런 느낌이 되면 성공입니다!

기사 일람

기사 내용

끝에

오늘은 Nuxt.js에서 쉽게 SPA 블로그 템플릿을 만들어 보았습니다!
하지만 기사의 내용이 전부 같네요. .
다음번에는 contentful과 연계하여 기사의 내용을 로드할 수 있도록 합시다!

그럼 -.