Nuxt.js（ナクスト）は、Vue.jsアプリケーションを構築する為のフレームワークです。Nuxt.jsをでの開発環境を構築するにあたり、２つのインストール（プロジェクト作成）方法を見ていきます。

Nuxt.jsをインストールしVue.jsアプリケーション開発環境を構築する入門編

Nuxt.js（ナクスト）は、Vue.jsアプリケーションを構築する為のフレームワークです。 
<a href="https://ja.nuxtjs.org/" rel="noopener noreferrer" target="_blank">https://ja.nuxtjs.org/</a>
Nuxt.jsをでの開発環境を構築するための手段はいくつかありますが、その中で２つのインストール（プロジェクト作成）方法を見ていきます。
<h2 id="contents">Contents</h2>
<ol>
<li><a href="#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83">開発環境</a></li>
<li><a href="#nuxt-communitystarter-template">nuxt-community/starter-template</a>
<ol>
<li><a href="#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E8%A6%81%E4%BB%B6">システム要件</a></li>
<li><a href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">インストール</a></li>
</ol>
</li>
<li><a href="#nuxtcreate-nuxt-app">nuxt/create-nuxt-app</a>
<ol>
<li><a href="#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E8%A6%81%E4%BB%B6-1">システム要件</a></li>
<li><a href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1">インストール</a></li>
<li><a href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90">プロジェクト作成</a></li>
<li><a href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%81%AE%E5%A4%89%E6%9B%B4">アプリケーションディレクトリの変更</a></li>
</ol>
</li>
</ol>
<h2 id="開発環境">開発環境</h2>
今回の開発環境は以下の通りです。
<ul>
<li>node 12.4.0</li>
<li>npm 6.10.2</li>
<li>Nuxt.js 2.9.1</li>
<li>create-nuxt-app 2.10.0</li>
</ul>
Nuxt.js と create-nuxt-app は、今回の作業でインストールされたバージョンです。
<h2 id="nuxt-communitystarter-template">nuxt-community/starter-template</h2>
最小構成のスターターテンプレート。Nuxt.js + Babel ESLintのみがインストールされます。 
<a href="https://github.com/nuxt-community/starter-template" rel="noopener noreferrer" target="_blank">https://github.com/nuxt-community/starter-template</a>
しかし公式ページには 
「非推奨です。create-nuxt-appでプロジェクト作成してね。」 
と思いっきり書いてあります。
リポジトリもアーカイブされていてこれ以上の開発は無いみたいなのでとりあえず試す用、、とはいえ、同じ構成は後述するcreate-nuxt-appでも作成できるので、敢えてこれを使う必要はもうないのかもしれません。
<h3 id="システム要件">システム要件</h3>
starter-templateを使うには、以下を満たしている必要があります。
<ul>
<li>node 8.0 以上</li>
<li>npm 5.0 以上</li>
<li>vue-cli 2.1 以上</li>
</ul>
<h3 id="インストール">インストール</h3>
starter-templateを使ってNuxt.jsをインストールする時は、以下の書式でコマンドを作成します。
<pre><code class="hljs language-shell">vue init nuxt-community/starter-template [ Project Name ]
</code></pre>
実際にインストールしてみます。プロジェクトを作成（インストール）したいところへ移動し、以下のコマンドを叩きます。
<pre><code class="hljs language-shell"># インストールしたい場所へ移動
cd /path/to/dev

# プロジェクト作成
vue init nuxt-community/starter-template nuxt-sample-1
</code></pre>
コマンドを叩くと、以下三点を聞かれます。
<ul>
<li>プロジェクト名</li>
<li>プロジェクトの説明</li>
<li>作者</li>
</ul>
これらは package.json に付与されます。未記入でもデフォルトが差し込まれるので、必要なら入力するが、後でも編集可能なのでひとまずENTERでもOK。
<pre><code class="hljs language-shell"># プロジェクト名
? Project name (nuxt-sample-1)
# プロジェクトの説明
? Project description (Nuxt.js project)
# 作者
? Author (rito &#x3C;xxx@mail.address>)
</code></pre>
プロジェクトが作成されたら以下が表示されます。
<pre><code class="hljs language-shell">vue-cli Generated "nuxt-sample-1".

To get started:

 cd nuxt-sample-1
 npm install # Or yarn
 npm run dev
</code></pre>
この時点ではまだひな形が落ちてきただけなので、作成されたプロジェクト（ディレクトリ）へ移動し、案内の通りに依存パッケージのインストールを行います。
<pre><code class="hljs language-shell"># プロジェクトルートへ移動
cd nuxt-sample-1

# nuxt.js install
yarn
もしくは
npm install
</code></pre>
インストールが完了したら、以下コマンドを叩いて開発サーバを起動させます。
<pre><code class="hljs language-shell"># yarn の場合
yarn dev

# npm の場合
npm run dev
</code></pre>
起動したら、ブラウザからhttp://localhost:3000/へアクセスすると、初期画面が表示されます。
package.json を見ると分かる通り、シンプル最小構成です。
<pre><code class="hljs language-json">{
 "name": "nuxt-sample-1",
 "version": "1.0.0",
 "description": "Nuxt.js project",
 "author": "rito &#x3C;xxx@mail.address>",
 "private": true,
 "scripts": {
 "dev": "nuxt",
 "build": "nuxt build",
 "start": "nuxt start",
 "generate": "nuxt generate",
 "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
 "precommit": "npm run lint"
 },
 "dependencies": {
 "nuxt": "^2.0.0"
 },
 "devDependencies": {
 "babel-eslint": "^10.0.1",
 "eslint": "^4.19.1",
 "eslint-friendly-formatter": "^4.0.1",
 "eslint-loader": "^2.1.1",
 "eslint-plugin-vue": "^4.0.0"
 }
}
</code></pre>
<h2 id="nuxtcreate-nuxt-app">nuxt/create-nuxt-app</h2>
Nuxt.jsが公式に提供しているプロジェクト作成ツールです。 
<a href="https://github.com/nuxt/create-nuxt-app" rel="noopener noreferrer" target="_blank">https://github.com/nuxt/create-nuxt-app</a>
<h3 id="システム要件-1">システム要件</h3>
以下を満たしている必要があります。
<ul>
<li>npx（npm 5.2.0からデフォルトでバンドル済み）</li>
</ul>
<h3 id="インストール-1">インストール</h3>
まずは create-nuxt-app 自体のインストールを行います。以下のコマンドでインストール出来ます。
<pre><code class="hljs language-shell"># create-nuxt-app install
npm i -g create-nuxt-app
</code></pre>
特に理由なければあちこちで使うので、 -g オプションを付けてグローバルインストールしています。この辺はお好みでどうぞ。
<h3 id="プロジェクト作成">プロジェクト作成</h3>
create-nuxt-appを使ってNuxt.jsをインストールする時は、以下の書式でコマンドを作成します。
<pre><code class="hljs language-shell">create-nuxt-app [ Project Name ]
</code></pre>
実際にインストールしてみます。
<pre><code class="hljs language-shell"># プロジェクトを作成したい場所へ移動
cd /path/to/dev

# Nuxt.js プロジェクト作成
create-nuxt-app nuxt-sample-2
</code></pre>
コマンドを叩くと、いくつか入力＆選択を行います。
<pre><code class="hljs language-shell"># プロジェクト名
? Project name (nuxt-sample-2)

# プロジェクト説明
? Project description (My superb Nuxt.js project)

# 作者
? Author name ()

# パッケージマネージャの選択
? Choose the package manager (Use arrow keys)
❯ Yarn
 Npm

# UIフレームワークの選択
? Choose UI framework
❯ None
 Ant Design Vue
 Bootstrap Vue
 Buefy
 Bulma
 Element
 Framevuerk
 iView
 Tachyons
 Tailwind CSS
 Vuetify.js

# サーバフレームワークの選択
? Choose custom server framework
❯ None (Recommended)
 AdonisJs
 Express
 Fastify
 Feathers
 hapi
 Koa
 Micro

# モジュールの選択
? Choose Nuxt.js modules (Press &#x3C;space> to select, &#x3C;a> to toggle all, &#x3C;i> to invert selection)
❯ ◯ Axios
 ◯ Progressive Web App (PWA) Support

# リントツールの選択
? Choose linting tools (Press &#x3C;space> to select, &#x3C;a> to toggle all, &#x3C;i> to invert selection)
❯ ◯ ESLint
 ◯ Prettier
 ◯ Lint staged files

# テスティングフレームワークの選択
? Choose test framework (Use arrow keys)
❯ None
 Jest
 AVA

# レンダリングモードの選択
? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
 Single Page App

# デベロッパーツールの選択
? Choose development tools (Press &#x3C;space> to select, &#x3C;a> to toggle all, &#x3C;i> to invert selection)
❯ ◯ jsconfig.json (Recommended for VS Code)
</code></pre>
インストールが完了すると、以下が表示されます。
<pre><code class="hljs language-shell">Successfully created project nuxt-sample-2

 To get started:

 cd nuxt-sample-2
 yarn dev

 To build &#x26; start for production:

 cd nuxt-sample-2
 yarn build
 yarn start
</code></pre>
この時点でスターターテンプレートとは違い、既に依存パッケージのインストールも完了した状態です。
表示された案内の通りに作成されたプロジェクトへ移動し起動後、ブラウザから http://localhost:3000/ へアクセスするとNuxt.js の初期画面が表示されます。
<h3 id="アプリケーションディレクトリの変更">アプリケーションディレクトリの変更</h3>
プロジェクトに色々なツールを導入していくと、設定ファイルやディレクトリなどでごちゃごちゃしてきます。その時には、Nuxt.jsのアプリケーション部分だけ別のディレクトリに移動させるとすっきりします。
インストール時に何を導入したかで作成されるディレクトリやファイルが若干異なりますが、例えば ESLint と Jest を導入した場合のプロジェクトルート配下の内容は以下になっています。
<pre><code class="hljs language-shell">project_dir
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── pages
├── plugins
├── static
├── store
├── test
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── jest.config.js
├──nuxt.config.js
</code></pre>
これに１つ新たなディレクトリを作成して、Nuxtアプリケーション部分だけをそこに移動させます。
<pre><code class="hljs language-shell">project_dir
├── src
| ├── assets
| ├── components
| ├── layouts
| ├── middleware
| ├── pages
| ├── plugins
| ├── static
| └── store
├── node_modules
├── test
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── jest.config.js
├── nuxt.config.js
├── package.json
├── README.md
└── yarn.lock
</code></pre>
移動させたら、この変更を適用させる為に設定ファイルを編集します。
nuxt.config.js
<pre><code class="hljs language-javascript">export default {
 srcDir: 'src', // 追加
</code></pre>
アプリケーションディレクトリを指定する記述を追加しています。（追加場所はどこでも大丈夫です。）
ここまでを行ったら改めてNuxtを起動させ、問題なく動作すれば完了です。
<h2 id="まとめ">まとめ</h2>
特に理由がなければ、create-nuxt-appで環境構築していけばスムーズにNuxt.jsでの開発環境を構築できます。
<a href="https://github.com/rito328/www.ritolab.com-sample-sources-create-nuxt-app" rel="noopener noreferrer" target="_blank">サンプルソース</a>