Nuxt.js_環境設定

Nuxt.jsとは

Nuxt.jsとはVue.js アプリケーションを構築するためのフレームワークです。

Vue本体、ルーティング管理、サーバーサイドレンダリングなどの様々なパッケージが含まれており、利用者は簡単にWEBアプリを作成することができます。

NuxtとVue CLIとの違い

Nuxtはプロジェクトの設定をほぼ自動で行ってくれます。不都合としては、ツールの規約に則って利用することが求められることです。

一方、Vue CLIはライブラリの利用などに設定が必要です。手間があるものの、自由度が高く、細かいカスタマイズを行うことができます。

Nuxt.jsのインストール

事前にnpm（Node.jsインストール時に付属するパッケージマネージャー）のインストールが必要です。

npmのバージョンは「5.2.0」以降（npxがバンドルされているもの）にする必要があります。

Nuxtのインストールは下記コマンドのみです。


$ npm i -g create-nuxt-app

Nuxtの利用

Nuxtプロジェクト作成

下記コマンドを実行すると現在ディレクトリにプロジェクトフォルダを作成します。


$ npx create-nuxt-app <project_name>

インタラクティブに設定を選択できます。例えば下記のように設定します。


> npx create-nuxt-app test_project
npx: 379個のパッケージを62.297秒でインストールしました。
> Generating Nuxt.js project in C:\Users\xxxxx\test_project? Project name test_project
? Project description My priceless Nuxt.js project
? Use a custom server framework none
? Choose features to install Prettier, Axios
? Use a custom UI framework vuetify
? Use a custom test framework none
? Choose rendering mode Single Page App
? Author name XXXXXX
? Choose a package manager npm

実行

create-nuxt-app実行後に出力されている通りコマンドから実行できます。


$ npm run dev

デフォルトでは http://localhost:3000/ へブラウザアクセスすればアプリが表示されます。

Nuxt.js設定

ディレクトリ構成

詳細な構造仕様は https://ja.nuxtjs.org/guide/directory-structure/ に記載されています。

簡単にいえば下記の想定でファイルを追加していきます。

指定	説明
assets	画像ファイル、フォントファイル、コンパイルされていないCSSやJSファイルを格納します。
components	ページを構成する部品（コンポーネント）の定義ファイルを格納します。
layouts	ページで共通となるデザインレイアウトを格納します。
middleware	レンダリング前（ページ遷移などを契機）に実行する関数を定義します。
pages	ページファイル（ルーティング単位）を格納します。
plugins	アプリケーションをインスタンス化する前に実行したいJSプラグインを格納します。
static	静的ファイルを格納します。このディレクトリ内のファイルはビルド後には「/」に配置されます。
store	Vuex ストアのファイルを格納します。

「assets」と「static」の使い訳はwebpackでコンパイルしたいかどうかで判断します。

webpackでコンパイルしたい場合は「assets」ディレクトリに、コンパイルしたくない場合は「static」ディレクトリにファイルを入れます。

設定ファイル

nuxt.config.jsに定義します。

細かい設定を行う場合には公式サイト（https://ja.nuxtjs.org/guide/configuration）を確認します。