Nuxt+Vuetify+Laravelで予定確認カレンダーを作りました！【フロントエンドの準備】

2021/12/29 2021/12/29

開発環境

Nuxt.jsとは、Vue.jsを元にしたJavaScriptのフレームワークで、Web 開発をシンプルにかつパワフルにするオープンソースフレームワークです！

東京都が2020年に公開した新型コロナウイルス感染症対策サイトでも使用されています。

前提として、Nuxt.jsをインストールするにはNode.jsのnpmコマンドを使用するのでインストールがしてあることを確認してください。

Node.jsのインストールについては、以下を参照してください。
→Node.JSのインストール

Nuxt.js公式より引用：https://nuxtjs.org/ja/

ターミナルを開いて、以下のコマンドを実行してください

※UIフレームワークはVuetifyを選択してください

npm init nuxt-app <project-name>

始めると、いくつかの質問が表示されます (名前、Nuxt オプション、UI フレームワーク、TypeScript、リンター、テストフレームワーク、その他)。すべてのオプションについては、create-nuxt-app documentation を確認してください。

一度全ての質問に答えると、全ての依存関係がインストールされます。次のステップは、プロジェクトフォルダに移動して、プロジェクトを起動します。

cd <project-name>
npm run dev

ターミナルで以下のコマンドを入力してプロジェクトを実行します

npm run dev

※アプリケーションを開発モードで起動する場合は、dev コマンドを使用します。

今、アプリケーションは http://localhost:3000 で動作しています。

ターミナルのリンクをクリックしてブラウザを開くと、前のステップでコピーした「Hello World」のテキストが表示されます。

※Nuxt を開発モードで起動すると、ほとんどのディレクトリでファイルの変更を監視しているので、新しいページを追加する際などにアプリケーションを再起動する必要はありません。

http://localhost:3000を開くとこのような画面がでてくるのでこれで準備は終了です。

次回はビューの作成について説明していきます。