Vue.jsベースのフレームワーク！ Nuxt.js入門《環境構築からプロジェクト実行まで》

#JavaScript #Nuxt.js #Vue.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にアクセスし、ページを確認してみましょう。以下のサンプルページが表示されたら、プロジェクトの実行は完了です。