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

サムネイル

開発環境

OSWindows10
エディタVisual Stuido Code
開発環境XAMPP
データベースMySQL
フロントエンドNuxt, Vuetify
バックエンドLaravel

ロードマップ

Nuxtの導入

Nuxtとは?

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

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

新型コロナウイルス感染症対策サイトのスクリーン画像

インストール手順

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

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

Nuxt.jsでプロジェクトを作成

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

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

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

npm init nuxt-app <project-name>

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

  • project name (そのまま)
  • Programming language:JavaScript
  • packege maneger:Npm
  • UI framework:Vuetify.js
  • Nuxt.js modules:axios(pwaにしたい方はここでpwaも選択)
  • Linting tools:None
  • Testing framework:None
  • Rendering mode:Single Page App
  • Deployment target:Static

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

cd <project-name>
npm run dev

プロジェクトの開始

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

npm run dev

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

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

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

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

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

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