Vue.jsベースのフレームワーク！ Nuxt3入門《新規プロジェクトの作成》

#プログラム #JavaScript #Nuxt.js #Vue.js

記事をシェア：

コピー

こんにちは、樋口です。

今回はWindowsでのNuxt3のインストールから、WEBプロジェクトの作成から実行までを行っていきます。

Nuxt.jsとは

Nuxt.jsとは、Vue.jsのWEBアプリケーションを作成するためのフレームワークで、開発者が簡単に開発を行えるようにサポートをしてくれます。主機能として、サーバーサイドレンダリング、コードの自動分割、自動ルーティングなどの機能が備わっております。

Node.jsのインストール

Nuxt.js をインストールする為、まずはNode.jsをインストールします。Node.jsをインストールすることにより、npmコマンドを使用することができます。今回はご紹介しませんが、yarnでも以降の手順を行うことができます。

Node.jsのインストールについては、以下を参照してください。
噂のNode.jsをはじめてみよう！ WindowsにNode.jsをインストールして環境構築

インストール後、コマンドプロンプトを起動しnpm —versionとnode —versionを実行します。

これでNode.jsのインストールとnpmコマンドの実行をすることができます。

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

コマンドプロンプトより、以下のコマンドを実行します。
「npx nuxi init プロジェクト名」

今回は、以下のコマンドよりサンプルプロジェクトを作成します。
「npx nuxi init sample-project」

コマンドを実行していきます。

Nuxt3プロジェクトの作成
プロジェクトフォルダ移動後、必要モジュールのインストールを実施します。

これでNuxt3の初期プロジェクトの作成が完了となります。

Nuxt3はNuxt2とは違い、必要最低限のプロジェクト作成となるので、別途必要なフォルダやプラグインのインストールが必要となります。

※ 必要フォルダの作成や、ライブラリのインストールについては、別ブログで紹介いたします。

Nuxt.jsプロジェクトの起動

作成したプロジェクトを起動します。まずはコマンドプロンプトから、作成したプロジェクトに移動します。
「cd プロジェクトパス」

次に以下のコマンドを実行します。
「npm run dev」

ブラウザでhttp://localhost:3000 にアクセスし、ページを確認してみましょう。以下のサンプルページが表示されたら、プロジェクトの実行は完了です。