はじめに
Nuxt.jsとContentfulとNetlifyでモダンな（？）SPAブログを作りました。こちら
何回かにわけて構築の記録を残しているシリーズの第２回です。
今回は簡単に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と連携して、記事の内容を読み込めるようにしましょう！
ではではー。