Nuxt公式チュートリアルをやっていく

TanaShun0804 commented 3 years ago

TanaShun0804 commented 3 years ago

GET STARTED

ルーティング
- NuxtはVue Routerが自動で組み込まれている
- pages配下がそのままルーティングになる
- 動的ルーティングの場合はアンダースコアをprefixとしてつける
- 動的ページusers/_id.vueのパラメータはthis.$route.params.idで受け取れる
リンク
- <NuxtLink to="/">Home page</NuxtLink>
- 他サイトへのリンクはaタグ
- ReactRouterとほとんど一緒

TanaShun0804 commented 3 years ago

サーバー
- nuxt dev - 開発サーバーを起動
- nuxt build - 本番用の webpack を使用してビルド(CSS、JSをミニファイする、.nuxt配下にビルド)
- nuxt start - 本番サーバーを起動
静的サイト
- nuxt dev - 開発サーバーを起動
- nuxt generate - アプリケーションをビルドし、すべてのルートを HTML ファイルとして生成し、dist/ ディレクトリに静的にエクスポートして静的ホスティングに利用する
- nuxt start - 静的ホスティング（Netlify、Vercel、Surge など）と同じように dist/ ディレクトリを提供します。デプロイ前のテストに最適
SSR
- nuxt buildでビルドしてnuxt startで起動
SSG、SPA
- nuxt generateで静的ファイルを生成してデプロイ

TanaShun0804 commented 3 years ago

TanaShun0804 commented 3 years ago

herokuより楽でびっくり

TanaShun0804 commented 3 years ago

Vuexのヘルパー周りの構文で詰まったけどなんとかAPIから取得done mapAction、mapGettersあたりめっちゃ便利前にReduxで挫折しかけたけどVuexやってからReduxいくとキャッチアップしやすいのかなって思った