スポンサーリンク

NuxtJSでHello Worldをやってみよう

NuxtJSとは?

NextやらNuxtやらNest…似たような名前がありますが、NuxtJSはVue.jsに基づいたWebアプリケーションフレームワークです。

最大のメリットはSSR(サーバサイドレンダリング)をVue.jsで実現できることではないでしょうか。また、静的ページを生成するコマンドも用意されていたりします。

習うより慣れろということで早速手を動かしながらどういったものか見てみましょう。

プロジェクトの作成

まずはnpxが実行可能か確認しましょう。npmのバージョンが5.2.0以降であれば、npxコマンドが実行できます。

> npm -v
6.10.2

私の場合、上記のようにnpmのバージョンが6.10.2だったのでOKです。

それではプロジェクトのベースを作成します。

npx create-nuxt-app nuxt-hello-world

上記のコマンドを実行すると、いくつか対話形式で質問が表示されるので入力する必要があります。

? Project name nuxt-hello-world
? Project description My superior Nuxt.js project
? Author name karaageeee
? Choose programming language JavaScript
? Choose the package manager Npm
? Choose UI framework Bootstrap Vue
? Choose custom server framework Express
? Choose Nuxt.js modules Axios, DotEnv
? Choose linting tools ESLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools jsconfig.json (Recommended for VS Code)

私の場合、上記のように設定しました。後からも変更できますので、よくわからなければエンターを押しておいて問題ありません。

特に注目すべきところはChoose rendering modeのところで、ここでUniversal(SSR)かSPAを選択することになります。今回はSSRにしました。

しばらく待つと

🎉  Successfully created project nuxt-hello-world

  To get started:

	cd nuxt-hello-world
	npm run dev

  To build & start for production:

	cd nuxt-hello-world
	npm run build
	npm run start

上記のメッセージが表示されればプロジェクトの作成が完了です。

プロジェクトが作成された状態でまずはサーバが立ち上がってブラウザで表示できるかを確認してみましょう。

以下のコマンドを実行して

cd nuxt-hello-world
npm run dev

以下のメッセージが表示されればローカルでサーバが立ち上がっています。

 READY  Server listening on http://localhost:3000

問題なければ、ブラウザを開いてhttp://localhost:3000にアクセスしてみてください。

するとNuxtJSのロゴとプロジェクト作成時に指定したプロジェクト名とプロジェクトの説明文が表示されたと思います。

以上が確認できれば無事NuxtJSのプロジェクトを生成できていますので、機能を見ていきましょう!

Hello World

http://localhost:3000/hello-worldにアクセスしたらHelloWorldと表示できるようにしましょう。

まずはルーティングを設定していきます。
作成したプロジェクトにpagesディレクトリがあるので、その中に木構造でvueファイルを作成すると自動でルーティングされます。初期状態ではpages/index.vueのみとなっていて、これがhttp://localhost:3000と紐付いています。ですので、pages/hello-world.vueを作成するとhttp://localhost:3000/hello-worldへのルーティングが作成することになります。以下のコードでhello-world.vueをpagesディレクトリに作成します。

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World'
    }
  }
}
</script>

上記を作成すると

npm run dev

を実行していればこのコマンドがプロジェクト内を監視していてビルドが実行されます。上記の変更のみであればすぐにビルドが終わるはずですのでhttp://localhost:3000/hello-worldへアクセスするとHello Worldを表示できることが確認できました。

まとめ

ルーティングが自動化されているのはすごい便利ですね!

コメント

タイトルとURLをコピーしました