【Nuxt.js】ブログ作成の記録⑥ ~作り直し&デプロイ~

はじめに

ブログ作成の格闘記です。

【Nuxt.js】ブログ作成の記録⑤ ~Vue.jsで基本に立ち返る(v-on実装の戦い※失敗)~

したいこと

前回から大きく変わらず

Vuetifyを使いこなす

全体

プロフィールはカードではなくもっとそれっぽく!笑

カルーセルで画像表示をスライドしておしゃれに!

タグ表示

CSSの改善・レスポンシブ対応

カードはHorizontal cardsで!!

ボトムナビゲーション

Popupの実装

JSの比較演算子なりVue.jsのmethodsを組み合わせればいけそう。。。

axiosのインストール&理解

SPAで試してみる

挑戦

SPAで試してみる

ふとSPAで試したらディレクトリやらv-on問題やらどうなるのか気になったので試してみました。

$ npx create-nuxt-app blog2

create-nuxt-app v2.15.0
✨ Generating Nuxt.js project in blog2
? Project name blog2
? Project description My tiptop Nuxt.js project
? Author name masaru
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools jsconfig.json (Recommended for VS Code)
- Installing packages with npm

今回はaxiosも最初から入れてみました。

と、ここで早速気付く。

じぶんがVuetifyで実装したかったサイドバーが初期から導入されている。。。笑笑

あれ??SSRバージョンで作ったときどうだったかな?と気になったのでこれも作ると同じくサイドバー導入がされている!!

どうやって実装されているのか解明した過ぎるので後程検証します!!

とりあえず今まで試していたスクリプトのコピペチェック。

前回通りのこの形だと動かない

methods: {
  increment: function(){
    this.count += 1 
  } 
}

これだとSPAでもSSRでも動いた!!

methods: {
  increment () {
    this.count += 1
  }
}

ってことで無事動かせたのでスクリプトを変更して今までアプリのコードを修正。

しかし!!いままで作ったやつにコピペしたら動かない。。。泣

違いがaxiosの有無くらいしかもはや見当たらない。

とりあえずaxiosを導入してみます。

$ npm install @nuxtjs/axios

nuxt.config.jsのモジュールにも追加。

modules: [
  '@nuxtjs/axios',
],
動作しませんでした。。。笑 (もはや1からコピペして作り直したほうが良さそうな気がしてきた。。。)

Vuetifyと何か競合でもしているんだろうか。。。Vuesaxも入れてしまっているし。。。

ついでにVuesaxのトップ画も気になったのでこれも作ってみた。

正直、Vuetifyのトップ画見た後だとあんまりかっこよくない。。。笑

SSRで1から試してみる。

ってことで1からSSRで作りなおしてみました。

既成レイアウトをとりあえず試します。

なんと動かすことができました。やっぱりなにかが競合なりしているっぽいです。

(試しにこのコードを動かない初期プロジェクトのdefault.vueにコピペしても本当に動きませんでした。。。)

どこで初期プロジェクトが動かなくなっているのか原因を探る!!

※ついでにずっと気になっていたけどホットリロードがされていない件も解決できたら嬉しい。(これも関係しているのかな??)

①Vuesaxのインストール

問題なし!!(ただここでVuesaxとUIコンポーネントを併用するとレスポンシブ時などの恩恵を受けられないんじゃないかということに気付き、次はVuetifyのみで作ってみようと決める。nuxt.config.jsにあるvuesaxのpluginをミュート。)

②markdown-itとfont awesomeのインストール

問題なし!!

markdown-itに関してはついでにこちらを参考に目次も作ってくれる追加プラグインをインストールしてみました◎

font awesomeはコチラを参考に。以下で表示できるようにしました。

nuxt.config.js

modules: [
  'nuxt-fontawesome'
  ],
fontawesome: {
  imports: [
  {
    set: '@fortawesome/free-solid-svg-icons',
    icons: ['fas']
  },
  {
    set: '@fortawesome/free-brands-svg-icons',
    icons: ['fab']
  }
  ]
},
テンプレート側
<font-awesome-icon :icon="['fab', 'twitter']" />
<font-awesome-icon :icon="['fas', 'dollar-sign']" />
③contentfulのインストール

問題なし。

以上、一通り試したけど問題なし。良くも悪くも今までわからずいた部分が動いたので原因掴めず。一旦このまま進めてみよう。

デプロイ

ためしに初期プロジェクトと2個目のプロジェクト両方ともデプロイしてみた。

どちらも問題なし。特に後者はスライドバーとか実装できていて、コピペでレスポンシブ対応に。

Vuetifyの恩恵をもろに受けてる。素晴らしい。

最初に作ったプロジェクト

v-onなどの実装ができなかったので作り直した2つ目のプロジェクト。

現状

前述のとおり。

所感・気づき・メモ

所感

原因不明もなんとか先に進めそう。引き続き頑張ります。

気づき&学び

・ESlintが初学者にとっては大変ありがたい。 参考

・SPAとSSRの違い。SEOというよりも記事が増えたときのこと考えると選択肢はSSRの一択。 参考① 参考②

StaticGen これ見るとReactユーザーの方が多いんだな~とわかる。

メモ

今後すること

・作り直し。(引き続きv-on実装できない原因検証しながら)

・レスポンシブ対応

コメントを残す