Vue.jsベースのフレームワーク! Nuxt.js入門《環境構築からプロジェクト実行まで》
目次
こんにちは、樋口です。
今回はWindowsでのNuxt.jsのインストールから、WEBプロジェクトの作成から実行までを行っていきます。少し長くなりますが、よろしくお願いいたします。
Nuxt.jsとは
Nuxt.jsとは、Vue.jsのWEBアプリケーションを作成するためのフレームワークで、開発者が簡単に開発を行えるようにサポートをしてくれます。
主機能として、サーバーサイドレンダリング、コードの自動分割、自動ルーティングなどの機能が備わっております。
Node.jsのインストール
Nuxt.js をインストールする為、まずはNode.jsをインストールします。Node.jsをインストールすることにより、npmコマンドを使用することができます。今回はご紹介しませんが、yarnでも以降の手順を行うことができます。
Node.jsのインストールについては、以下を参照してください。
Node.JSのインストール
インストール後、コマンドプロンプトを起動しnpm –versionとnode –versionを実行します。
これでNode.jsのインストールとnpmコマンドの実行をすることができます。
Nuxt.jsでプロジェクトを作成
コマンドプロンプトより、以下のコマンドを実行します。
「npx create-nuxt-app プロジェクト名」
今回は、以下のコマンドよりサンプルプロジェクトを作成します。
「npx create-nuxt-app sample-project」
コマンド実行後、いくつかの質問に答えていきます。
- プロジェクト名を入力します。
- プロジェクトの説明文を入力します。
- 著者名を入力します。
- JavaScriptかTypeScriptのどちらかを選択します。今回は、JavaScriptを選択します。
- YarnかNpmどちらかを選択します。今回は、Npmを選択します。
- カスタムサーバーフレームワークを選択するを選択します。noneを選択すると、特に選択されません。今回は、noneを選択します。
- プロジェクトにインストールしたい機能を選択できます。複数選択できます。今回は、Axiosを選択します。(通信モジュールになります。)
- プロジェクトにインストールしたいツールを選択できます。複数選択できます。今回は、すべて選択します。
ESLint JavaScript のための静的検証ツール(バグ検索) Prettier コードフォーマッタ Lint staged files package.jsonによるパッケージの一元化 StyleLint scss記法のチェックが行える
- プロジェクトにインストールしたいテストツールを選択できます。今回は、Noneを選択します。
- Nuxt.js のレンダリングモードを選択します。今回は、Universal(SSR)を選択します。
Universal(SSR) アイソモーフィックなアプリケーション(サーバーサイドレンダリング + クライアントでのナビゲーションを行う) Single Page App サーバーサイドレンダリングを行わない(クライアントでのナビゲーションのみ)
- 開発用ツールの選択を行います。今回は選択しません。
- 上記の選択をすべてし、インストールを行い以下の、「Successfully created project」のメッセージが出たら完了です。
Nuxt.jsプロジェクトの起動
作成したプロジェクトを起動します。まずはコマンドプロンプトから、作成したプロジェクトに移動します。
「cd プロジェクトパス」
次に以下のコマンドを実行します。
「npm run dev」
ブラウザでhttp://localhost:3000にアクセスし、ページを確認してみましょう。以下のサンプルページが表示されたら、プロジェクトの実行は完了です。
最後に
今回紹介した手順で、Nuxt.jsの実行環境が整います。次回は、今回インストールされたNuxt.jsのプロジェクト構成について説明していきます。
今後は、Nuxt.jsの便利なライブラリについてもご紹介できればと考えています。次回もよろしくお願いします。
それではまた。
《関連記事》
アシスタントマネージャー I.Higuchi 技術を中心に、言語の入門編や便利なライブラリ紹介など、技術のお役立ち情報をご紹介します。