create-nuxt-appでNuxt.jsの開発環境をサクッと作る方法(mac)

自分用備忘録。Nuxt.jsの環境を作る方法です。

公式ドキュメントはこちら

NuxtJS公式ドキュメント

新規プロジェクトの作成

手順1.
ターミナルで作成したいディレクトリに移動

cd 作成したいディレクトリ

手順2.
下記のコマンドを入力してEnter

npx create-nuxt-app 任意のプロジェクト名

手順3.
プロジェクト名を聞かれるので入力

そのままEnterで2でつけたプロジェクト名が適用されます。
ややこしいけど、2で入れた方はプロジェクト用に生成するフォルダ名らしいです。何も書かないと直下にインストールされます。

手順4.
11個の質問に答える

(1)言語

どの言語で開発するか？

(2)パッケージマネージャー

ソフトウェアの管理ツールを何にするか？

Yarn：Npmの上位互換として作られたのでNpmより新しい。機能性・パフォーマンス性が高く、スピーディーに開発できる。
Npm：Node.jsで作られている。標準ツールなので、Yarnよりドキュメントが充実している。信頼性が高め。

どちらもpackage.jsonは使えます。

(3)vue.jsのUIフレームワーク

有名どころはBootstrapあたりです

(4)Nuxt.jsのモジュール

(5)整形ツール（Lint）

コードのフォーマッターは使うか？

(6)テストフレームワーク

(7)レンダリングモード

Universal：サーバー側でjsをレンダリングして実行するモードで
Single Page App：クライアント側でjsをレンダリングして実行するモード
DBを持たないようなフロントエンドのみを開発する場合は「Single Page App」を選択して良いかと思います。

(8)デプロイ方法

Server：node.jsとしてサーバー側で動かす場合（サーバー上でhtmlを生成する方法）
Static：静的なファイルとして書き出してから動かす場合（htmlに書き出してからアップロードする方法）

(9)開発ツール

複数選択の場合はShiftキーで選択できます

(10)Githubの名前

(11)Gitの使用有無

手順5.
Successfully created projectと表示されたらインストール完了

手順6.
動作確認してみる

cdで2で作成したディレクトリに移動して、下記コマンドを入力

npmでインストールした方はこちら

npm run dev

Yarnでインストールした方はこちら

yarn dev

ブラウザでhttp://localhost:3000/ を叩く

このように表示されれば成功です。

ちなみにサーバーを停止したい場合は⌘+Cです。
またサーバーを動かしたい時はnpm run devです。

手順7.
Hello Worldを表示する

pages/index.vueを作成し、下記コードをコピペする

<template>
    <section>
        <h1>
            {{message}}
        </h1>
    </section>
</template>

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

再度ブラウザを確認し、Hello Worldが出るか確認してください。

Hello Worldが出たらOK！

今回、マスタッシュ構文で表示していますが、ベタでh1にHello Worldとしてももちろん表示できます。

お疲れ様でした😚