素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【プロジェクト作成編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリングをしてみよう【Vue.js】

投稿日: 2019年6月11日
最終更新日:

スポンサーリンク

336×280




前回のおさらい

前回は、Dockerを用いてNuxt.jsの開発を行うための環境を構築する所までご紹介しました。

今回は実際にNuxt.jsプロジェクトを作成し、起動して動作確認する所までをご紹介して行こうと思います。

手順

vue-cliでプロジェクトを作成

まずはコンテナの/projectsディレクトリにて、以下のコマンドを実行してプロジェクトを作成しましょう。

対話式でいろいろ求められるのでよしなに入力してください。

完了すると、以下のようなディレクトリ構造が生成されると思います。

必要モジュールをインストール

次に、プロジェクトルートに移動し必要なモジュールをインストールしましょう。

今回はyarnを使おうと思っているので、yarn installと打ちましょう。

Done in 131.50s.みたいなログが出ればインストール完了です。

起動

では、実際にサーバーを起動してみましょう。

こんなログが出れば起動完了です。
ブラウザでhttp://localhost:3000 にアクセスしてみましょう。

正常にページが表示されましたね♪

Nuxt.jsの便利機能

ホットリロード

今回作成したプロジェクトには、ホットリロード機能が搭載されています。

ホットリロードとは、コードやファイルを変更した際に、手動で再起動しなくても自動で再リロードをして適用してくれる機能になります。

これが地味に便利過ぎてとても助かります。
アジャイル開発をする上では必須の機能ですよね。

ルーティングの自動設定

こちらも、Nuxt.jsの強力な機能と言えるルーティングについてです。

Nuxt.jsでは、設定ファイルへのルーティング定義は不要です。

その代わりに、pagesディレクトリ配下のツリー構造によって自動でルーティングの定義が行われます。

Nuxt.js は pages ディレクトリ内の Vue ファイルの木構造に沿って、自動的に vue-router の設定を生成します。ルーティング – Nuxt.js

例えば、pagesディレクトリ配下に以下のようにchildディレクトリを作成してみます。

そして、ブラウザでhttp://localhost:3000/child にアクセスすると追加したindex.vueの内容が表示されると思います。

設定と実ファイルを二十管理する必要が無いのは開発者としてスッキリしますね♪

便利なコマンドが用意されている

Nuxt.jsを使う利点として、最初から開発・本番それぞれに適したコマンドが用意されている点が言えます。

Nuxt.js は便利コマンドのセットを備えています。開発時に役立つものも、プロダクション用途のものもあります。コマンド – Nuxt.js

例えば、今回使ったyarn devコマンドは、内部的にnuxtコマンドを実行しています。

そして、本番デプロイ用にnuxt buildnuxt startコマンドも用意されています。

また、静的ホスティング向けのnuxt generateという言うコマンドもあります。

それぞれのコマンドの意味は以下の通りです。

コマンド 役割
nuxt 開発サーバーを localhost:3000 で起動します。このサーバーはホットリローディングします
nuxt build アプリケーションを Webpack でビルドし、JS と CSS をプロダクション向けにミニファイします
nuxt start プロダクションモードでサーバーを起動します(nuxt build 後に実行してください)
nuxt generate アプリケーションをビルドして、ルートごとに HTML ファイルを生成します(静的ファイルのホスティングに用います)

ビルド用のスクリプトを組むことなく、用意されたコマンドを叩くだけでビルドとデプロイが出来るのはとてもありがたいですね。。。!

本日のオススメ商品

終わりに

以上のように、コマンドベースで簡単にプロジェクトを作成し、起動するところまで出来ました。

次回はプロジェクトへのsassの導入方法についてご紹介していこうと思います。

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist