Vue.js

Nuxt.jsを使ってみる ~Hello World~

投稿日:

Vue.jsでサーバサイドレンダリング(SSR)ができるNuxt.jsを使ってみます。
今回は、まずはNuxt.jsについて調べ、「Hello World」を出してみます。

Nuxt.jsとは

Nuxt.jsとは、Vue.jsでサーバサイドレンダリングを実現するためのフレームワークになります。
Vue.jsに限らずですが、SPAの問題点として

  • OGP対応(SNSなどへのシェア時の画像や説明を表示させる仕組み)
  • 初期表示速度が遅い

の2点があげられます。
サーバ側でレンダリングを済ませた状態でクライアントへ返答することでそれらを解決することができます。
サーバサイドレンダリングの問題点としては、

  • サーバのCPUの負荷が高くなる
  • 開発コストがかかる

などがありますが、簡単にできるのであればやっておいてもいいかなと思うので、とりあえずやってみます。

Nuxt.jsを使ってみる

Vue CLIのインストール

すでに入ってある場合は必要ありませんが、入っていない場合はいれます。
※入れたくない場合は、Zipでテンプレートをダウンロードも可能です。

以下のコマンドを叩いてVue CLIをインストールします。

npm install -g @vue/cli @vue/cli-init

Nuxt.jsのテンプレートを取得

Nuxt.jsのテンプレートをVue CLIで取得します。
以下のコマンドを入力します。

vue init nuxt-community/starter-template <project-name>

今回は、「nuxt-test」という名前でプロジェクトを作成していきます。

nuxt-get-template

Nuxt.jsを動かす

テンプレート取得時に表示された通りに、「フォルダに移動」→「npm install」→「 npm run dev」していきます。

nuxt-npm-install

nuxt-start

動作確認

「http://localhost:3000」へアクセスしてページが表示されるか確認します。

nuxt-page

とくに問題なく表示できました。
取得したテンプレートのフォルダにはREADMEが入っているのでそこに何をおけばいいのか明確に書かれていてわかりやすくなってます。

-Vue.js
-

Copyright© freamap ブログ , 2020 All Rights Reserved.