Nuxt.jsを試す目的
SSRの動きがいまいち理解できないので動きをを確認したい。
個人的に開発中のシステムがあるので良さそうなら導入したい。
インストール
npxコマンドを使うのでNode.jsのインストールが必要。
既にNode.jsはインストール済みだったのでNuxt.jsのインストールから始める。
ターミナル上でnpx create-nuxt-appを実行
npx create-nuxt-appプロジェクト名の入力に進みます。
プロジェクト名を入力
プロジェクト名を入力"sample"と入力してEnter
プログラミング言語の選択に進みます。
パッケージマネージャーを選択
パッケージマネージャーを選択Npmを選択してEnter
UIフレームワークの選択に進みます。
UIフレームワークを選択Noneを選択してEnter
モジュールの選択に進みます。
モジュールを選択
モジュールを選択複数選択可能ですが、非同期通信だけ試したいのでAxiosのみを選択してEnter
(選択はスペースキー)
Lintツールの選択に進みます。
Lintツールを選択
Lintツールを選択全て選択してEnter
テストフレームワークの選択に進みます。
レンダリングモードを選択Universal(SSR/SSG)を選択してEnter
デプロイメントターゲットの選択に進みます。
デプロイメントターゲットを選択
デプロイメントターゲットを選択Server(Node.js hosting)を選択してEnter
デプロイメントツールの選択に進みます。
デプロイメントツールを選択
デプロイメントツールを選択jsoonconfig.jsonを選択してEnter
CIツールの選択に進みます。
インストール完了
インストール完了インストールが完了。
動作確認
サーバー起動
サーバー起動npm run devを入力してEnter
起動完了ポート番号3000でサーバーが起動しました。
今後試したいこと
- 新規ページの追加
- デフォルトテンプレートの変更
- ヘッダ、メインコンテンツ、サイドメニュー、フッタなどをコンポーネント化
Nuxt.jsで最終的にやりたいこと。
Nuxt.jsは静的ファイル(htmlなど)を出力する機能があるので以下を試してみたいです。
- ローカル環境で画面作成
- 表示するデータはレンタルサーバーに設置済のAPIを利用して取得
- generateコマンドで作成した画面を静的コンテンツとして出力
- phpやMySQLが使えない無料レンタルサーバー上に静的ファイルをアップロード