![見出し画像](https://assets.st-note.com/production/uploads/images/87552378/rectangle_large_type_2_9af58bcb573a841e60fa85b8b16f013f.jpeg?width=800)
create-nuxt-appでNuxt.jsの開発環境をサクッと作る方法(mac)
自分用備忘録。Nuxt.jsの環境を作る方法です。
公式ドキュメントはこちら
新規プロジェクトの作成
手順1.
ターミナルで作成したいディレクトリに移動
cd 作成したいディレクトリ
手順2.
下記のコマンドを入力してEnter
npx create-nuxt-app 任意のプロジェクト名
手順3.
プロジェクト名を聞かれるので入力
そのままEnterで2でつけたプロジェクト名が適用されます。
ややこしいけど、2で入れた方はプロジェクト用に生成するフォルダ名らしいです。何も書かないと直下にインストールされます。
手順4.
11個の質問に答える
(1)言語
![](https://assets.st-note.com/img/1663998401269-2KIYNmDJSa.png)
(2)パッケージマネージャー
![](https://assets.st-note.com/img/1663998367348-bl3NxomSoj.png)
Yarn:Npmの上位互換として作られたのでNpmより新しい。機能性・パフォーマンス性が高く、スピーディーに開発できる。
Npm:Node.jsで作られている。標準ツールなので、Yarnよりドキュメントが充実している。信頼性が高め。
どちらもpackage.jsonは使えます。
(3)vue.jsのUIフレームワーク
![](https://assets.st-note.com/img/1663998459465-YJCxYtuQpY.png)
(4)Nuxt.jsのモジュール
![](https://assets.st-note.com/img/1663998587126-9iTd2I8e1j.png)
(5)整形ツール(Lint)
![](https://assets.st-note.com/img/1663998629898-8iae8tfe9L.png?width=800)
(6)テストフレームワーク
![](https://assets.st-note.com/img/1663998694192-ADesE8Lgvz.png)
(7)レンダリングモード
![](https://assets.st-note.com/img/1663998720964-xC84MfM2g4.png)
Universal:サーバー側でjsをレンダリングして実行するモードで
Single Page App:クライアント側でjsをレンダリングして実行するモード
DBを持たないようなフロントエンドのみを開発する場合は「Single Page App」を選択して良いかと思います。
(8)デプロイ方法
![](https://assets.st-note.com/img/1663998760382-lxCmRTZs1H.png)
Server:node.jsとしてサーバー側で動かす場合(サーバー上でhtmlを生成する方法)
Static:静的なファイルとして書き出してから動かす場合(htmlに書き出してからアップロードする方法)
(9)開発ツール
![](https://assets.st-note.com/img/1664000234069-USqOGU50Yb.png)
(10)Githubの名前
![](https://assets.st-note.com/img/1663998897942-t0zBmNzFkn.png)
(11)Gitの使用有無
![](https://assets.st-note.com/img/1663999101561-ZG3GNRDPzp.png)
手順5.
Successfully created projectと表示されたらインストール完了
![](https://assets.st-note.com/img/1663999405239-6KjupBJ0sy.png?width=800)
手順6.
動作確認してみる
cdで2で作成したディレクトリに移動して、下記コマンドを入力
npmでインストールした方はこちら
npm run dev
Yarnでインストールした方はこちら
yarn dev
![](https://assets.st-note.com/img/1664000785591-Xy7OQNNnJg.png)
ブラウザでhttp://localhost:3000/ を叩く
![](https://assets.st-note.com/img/1664000901511-62L6689n3K.png?width=800)
ちなみにサーバーを停止したい場合は⌘+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が出るか確認してください。
![](https://assets.st-note.com/img/1664176161436-mRgZWD89fp.png?width=800)
今回、マスタッシュ構文で表示していますが、ベタでh1にHello Worldとしてももちろん表示できます。
お疲れ様でした😚
この記事が気に入ったらサポートをしてみませんか?