見出し画像

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としてももちろん表示できます。


お疲れ様でした😚


この記事が参加している募集

#最近の学び

182,077件

この記事が気に入ったらサポートをしてみませんか?