AMG Solution

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 –versionnode –versionを実行します。
 

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

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

コマンドプロンプトより、以下のコマンドを実行します。
「npx create-nuxt-app プロジェクト名」
 
今回は、以下のコマンドよりサンプルプロジェクトを作成します。
「npx create-nuxt-app sample-project」
コマンド実行後、いくつかの質問に答えていきます。
 

  1. プロジェクト名を入力します。
     

     
  2. プロジェクトの説明文を入力します。
     

     
  3. 著者名を入力します。
     

     
  4. JavaScriptかTypeScriptのどちらかを選択します。今回は、JavaScriptを選択します。
     

     
  5. YarnかNpmどちらかを選択します。今回は、Npmを選択します。
     

     
  6. カスタムサーバーフレームワークを選択するを選択します。noneを選択すると、特に選択されません。今回は、noneを選択します。
     

     
  7. プロジェクトにインストールしたい機能を選択できます。複数選択できます。今回は、Axiosを選択します。(通信モジュールになります。)
     

     
  8. プロジェクトにインストールしたいツールを選択できます。複数選択できます。今回は、すべて選択します。
    ESLint JavaScript のための静的検証ツール(バグ検索)
    Prettier コードフォーマッタ
    Lint staged files package.jsonによるパッケージの一元化
    StyleLint scss記法のチェックが行える


     

  9. プロジェクトにインストールしたいテストツールを選択できます。今回は、Noneを選択します。
     

     
  10. Nuxt.js のレンダリングモードを選択します。今回は、Universal(SSR)を選択します。
    Universal(SSR) アイソモーフィックなアプリケーション(サーバーサイドレンダリング + クライアントでのナビゲーションを行う)
    Single Page App サーバーサイドレンダリングを行わない(クライアントでのナビゲーションのみ)


     

  11. 開発用ツールの選択を行います。今回は選択しません。
     

     
  12. 上記の選択をすべてし、インストールを行い以下の、「Successfully created project」のメッセージが出たら完了です。
     

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

作成したプロジェクトを起動します。まずはコマンドプロンプトから、作成したプロジェクトに移動します。
「cd プロジェクトパス」
 
次に以下のコマンドを実行します。
「npm run dev」
 

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

最後に

今回紹介した手順で、Nuxt.jsの実行環境が整います。次回は、今回インストールされたNuxt.jsのプロジェクト構成について説明していきます。
 
今後は、Nuxt.jsの便利なライブラリについてもご紹介できればと考えています。次回もよろしくお願いします。
 
それではまた。
 
 
 
 
《関連記事》

HIGUCHI'S BLOG

樋口の記事

樋口の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING