【超初心者向け】VS Codeを使ってNuxt.jsの起動確認ができるまでの手順
はじめに
様々なブログでNuxt.jsの起動確認の方法が書かれているが、どれもある程度の前提知識が必要だったり、必要な工程が省略されていたりしてスムーズに進めることができませんでした。
本記事ではVS Codeを利用してNuxt.jsの動作確認ができるまでの手順をご紹介します。
1.npmのインストール
Nuxt.jsの環境を作成するためにはnpmコマンドが必要となります。
そのための準備を行います。以下のリンクからインストーラーを落とし、実行してください。
インストーラーの指示通りに進めてインストールしてください。
インストールができたかを確認します。
VS Codeのターミナルを起動します。
ターミナル上で以下のコマンドを入力して、バージョンが表示されればインストール成功です。
npm -v
2.アプリの作成
VS Codeのターミナルでコマンドを入力することでアプリの作成を行います。
方法は下記リンクのNuxt.jsのガイドにも記載があります。
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/
以下のような画面が起動すれば成功です！
停止する場合はターミナル上でctrl + Cを押します。
バッチ ジョブを終了しますか (Y/N)?
上記メッセージが表示されるので、Yを入力することで終了することができます。
今回の解説は以上です。
Discussion