
Vue.jsベースのフレームワーク! Nuxt3入門《新規プロジェクトの作成》
目次
こんにちは、樋口です。
今回は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 にアクセスし、ページを確認してみましょう。以下のサンプルページが表示されたら、プロジェクトの実行は完了です。
最後に
今回紹介した手順で、Nuxt3の実行環境が整います。次回は、今回のプロジェクトに必要フォルダやプラグインの追加などを行っていきたいと思います。
次回もよろしくお願いします。
それではまた。
《関連記事》

