【超初心者向け】VS Codeを使ってNuxt.jsの起動確認ができるまでの手順

公開:2020/09/27
更新:2020/09/27
2 min読了の目安(約1600字TECH技術記事

はじめに

様々なブログでNuxt.jsの起動確認の方法が書かれているが、どれもある程度の前提知識が必要だったり、必要な工程が省略されていたりしてスムーズに進めることができませんでした。
本記事ではVS Codeを利用してNuxt.jsの動作確認ができるまでの手順をご紹介します。

1.npmのインストール

Nuxt.jsの環境を作成するためにはnpmコマンドが必要となります。
そのための準備を行います。以下のリンクからインストーラーを落とし、実行してください。

https://nodejs.org/ja/download/

インストーラーの指示通りに進めてインストールしてください。

インストールができたかを確認します。
VS Codeのターミナルを起動します。

ターミナル上で以下のコマンドを入力して、バージョンが表示されればインストール成功です。

npm -v

2.アプリの作成

VS Codeのターミナルでコマンドを入力することでアプリの作成を行います。

方法は下記リンクのNuxt.jsのガイドにも記載があります。
https://ja.nuxtjs.org/guide/installation/

npx create-nuxt-app <project-name>

以下のような質問がされますので、回答していきます。
私が選択したものを載せておきます。

Project name : test
Programming language : JavaScript
Package manager : Npm
UI framework : Vuetify.js
Nuxt.js modules : Progressive Web App (PWA)
Linting tools : ESLint
Testing framework : Jest
Rendering mode : Single Page App
Deployment target : Server (Node.js hosting)
Development tools : jsconfig.json
Version control system : Git

ここまで入力すればプロジェクトが作成され、以下のメッセージが表示されます。

Successfully created project test
  To get started:
        cd <project-name>
        npm run dev

3.アプリの実行

以下のコマンドでディレクトリを移動します。

cd <project-name>

起動コマンドを入力します。

npm run dev

以下のようなメッセージが表示されるので、リンクをクリックします。

i Listening on: http://localhost:3000/     

http://localhost:3000/

以下のような画面が起動すれば成功です!

停止する場合はターミナル上でctrl + Cを押します。

バッチ ジョブを終了しますか (Y/N)?

上記メッセージが表示されるので、Yを入力することで終了することができます。

今回の解説は以上です。