【Nuxt.js】ブログ作成の記録②　～ビューの作成と参考サイト探し～

はじめに

以下の続きです。やっと記事をわけることを覚えました。笑

【Nuxt.js】ブログ作成の記録①

また、今回公式ドキュメントにしっかり目を通すことの重要性に気付きました。(今更)

Nuxt.jsの公式ドキュメント

https://ja.nuxtjs.org/guide/

Contentfulの公式ドキュメント

Contentfulをしっかり活用したい場合は以下に目を通すことをお勧めします。

ContentfulをNuxt.jsと統合する(公式)

コンテンツ配信API(公式)

参考になるサイト

以下とても参考になるサイトを追加で見つけました(以前見つけてたけど忘れていた。。。)のでこちらも紹介までに。
※Vuex活用されている。4章まで読了。

Nuxt.jsとContentfulで作るマイブログ

ビューの作成(復習編)

以前学習した内容を基に作成していきます。※今回は枠組みだけ作っていきます。

【Vue.js】Nuxt.jsの基本と学習メモ

layoutsディレクトリ

ページ共通の要素をここに追加する。

pagesディレクトリ

ルーティングに対応したコンポーネントを管理するディレクトリ。

componentsディレクトリ

Vue CLIと使い方は同じ。Vueコンポーネントを管理するディレクトリ。

※components/Logo.vue、components/VuetifyLogo.vue、pages/inspire.vueは使わないので削除しました。

layoutsディレクトリ

明示的な設定(pages側でexportする)をしなければ、default.vueがレイアウトとして読み込まれる。
共通部分(HeaderやFooter)＝ページ遷移しても表示したい(固定したい)部分をここに書く！！

default.vue

最初はVuetifyのインストールに伴い、toolbarなどが記載されているがこれは削除。

<next />タグに各ページのコンテンツが入る。
<nuxt-link />でリンクを追加できる。ルーティングの設定はpagesディレクトリで自動で行われる。

pagesディレクトリ

ここに存在するVueファイルがファイル名のままルーティングとなる。_(ファイル名).vueにすると動的ルーティングになる。
pages/index.vueがホームディレクトリ。

index.vue

トップページのコンテンツ。ここにContentfulから記事を取得するためのコードを記載。

Componentsディレクトリ

Componentsのインポートには、スクリプトでインポート、componentsに追加、テンプレートにタグを追加の3ステップが必要。

データを受け取り、それを含めてコンポーネント側で表示させたい場合はpropsを設定する。
データバインディング(v-bind)を使えば属性だけでなくデータも受け取れる。

デザイン

コンポーネントUI

Vuetifyにチャレンジして、実装が意外に難しいことに気付きました。

公式ドキュメントも個人的にはVuesaxの方が見やすい。。。

ってことでVuesaxに切り替えて使っていたのですが、残念ながらPopupなどScript内に処理を書かないといけないコンポーネントの実装ができませんでした。。。泣

完全な実力不足だと思うのですが、一旦両方使ってみたりいろいろ試してみようと思います。

ちなみにVuesaxはコチラを参考にインストールしました◎　Nuxt.jsでVuesaxを使う方法

追記：VuetifyでもScriptタグに入力するものは動かせませんでした。Vue.jsとNuxt.jsの違いとかそこ辺りの理解が足りないっぽいです。。。泣

一旦アニメーションを控えめにしてシンプルに作っていきたいと思います。

デザイン(おしゃれサイト探し)

その後、参考にするデザインを以下を中心に探しました。おしゃれなサイトが沢山ありますね。

おしゃれなブログデザイン23選〜参考になる国内外の美しいブログ

http://milieu.ink/

https://blog.rokuzeudon.com/

https://www.manicyouth.jp/cat/blog/

ん～シンプルでいいんだよな！

Vue.jsでレスポンシブ な Webアプリを作ろう

Vuetifyで作ったシンプルなサイトの記事も見つけた。こんな感じ。

おわりに

Vue.jsの基本機能を思いっきり無視(身についていない状態)してどんどん作っているので、基礎をわかっていたらすぐ解決できるような問題も起きている感。

コンポーネントUIを実装できなかったり。。。

バランスが難しいですが、もう少しこの状態で制作を進めてみたいと思います。

メモ

・VuetifyでFont Awesomeを使えるみたいですが、今回は個別でインストールしたので切り分けて使いました。色を追加できるのには感動しました。　参照

・webhookは実装したいな～

・.envがGitの管理下から外れるよう初期設定されているのも初知り。

・slugはcontentfulの以下と連動してる、

・contentfulのマークダウンは# h1といった感じでスペース空けないといけない。

参考サイト

npm install時に「–save」オプションはいらない

前回書いてたけどnpm i のとき–saveいらないらしい。

【Nuxt.js】共通で使用したいcssを読み込む

Contentfulの料金と使い方を整理しつつ、Nuxt.jsと組み合わせてブログを作る

引用

asyncData は ページ コンポーネントがローディングされる前に常に呼び出されます。サーバーサイドでは 1回だけ（Nuxt アプリへの最初のリクエスト）呼び出され、クライアントサイドではページ遷移をするたびに呼び出されます。
asyncData メソッド内の this を通してコンポーネントのインスタンスにアクセスすることは できません。それはコンポーネントが インスタンス化される前に このメソッドが呼び出されるからです。　asyncDataメソッドに関して(公式)

配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです:　リストレンダリングに関して(公式)