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

公開日 2019.8.24

カテゴリ：Nuxt.js
タグ：JavaScript,Vue,Nuxt

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

Nuxt.js（ナクスト）は、Vue.jsアプリケーションを構築する為のフレームワークです。
https://ja.nuxtjs.org/

Nuxt.jsをでの開発環境を構築するための手段はいくつかありますが、その中で２つのインストール（プロジェクト作成）方法を見ていきます。

開発環境
nuxt-community/starter-template
1. システム要件
2. インストール
nuxt/create-nuxt-app

開発環境

今回の開発環境は以下の通りです。

node 12.4.0
npm 6.10.2
Nuxt.js 2.9.1
create-nuxt-app 2.10.0

Nuxt.js と create-nuxt-app は、今回の作業でインストールされたバージョンです。

nuxt-community/starter-template

最小構成のスターターテンプレート。Nuxt.js + Babel ESLintのみがインストールされます。
https://github.com/nuxt-community/starter-template

しかし公式ページには
「非推奨です。create-nuxt-appでプロジェクト作成してね。」
と思いっきり書いてあります。

リポジトリもアーカイブされていてこれ以上の開発は無いみたいなのでとりあえず試す用、、とはいえ、同じ構成は後述するcreate-nuxt-appでも作成できるので、敢えてこれを使う必要はもうないのかもしれません。

システム要件

starter-templateを使うには、以下を満たしている必要があります。

node 8.0 以上
npm 5.0 以上
vue-cli 2.1 以上

インストール

starter-templateを使ってNuxt.jsをインストールする時は、以下の書式でコマンドを作成します。

vue init nuxt-community/starter-template [ Project Name ]

実際にインストールしてみます。プロジェクトを作成（インストール）したいところへ移動し、以下のコマンドを叩きます。

# インストールしたい場所へ移動
cd /path/to/dev

# プロジェクト作成
vue init nuxt-community/starter-template nuxt-sample-1

コマンドを叩くと、以下三点を聞かれます。

プロジェクト名
プロジェクトの説明
作者

これらは package.json に付与されます。未記入でもデフォルトが差し込まれるので、必要なら入力するが、後でも編集可能なのでひとまずENTERでもOK。

# プロジェクト名
? Project name (nuxt-sample-1)
# プロジェクトの説明
? Project description (Nuxt.js project)
# 作者
? Author (rito <xxx@mail.address>)

プロジェクトが作成されたら以下が表示されます。

vue-cli  Generated "nuxt-sample-1".

To get started:

 cd nuxt-sample-1
 npm install # Or yarn
 npm run dev

この時点ではまだひな形が落ちてきただけなので、作成されたプロジェクト（ディレクトリ）へ移動し、案内の通りに依存パッケージのインストールを行います。

# プロジェクトルートへ移動
cd nuxt-sample-1

# nuxt.js install
yarn
もしくは
npm install

インストールが完了したら、以下コマンドを叩いて開発サーバを起動させます。

# yarn の場合
yarn dev

# npm の場合
npm run dev

起動したら、ブラウザからhttp://localhost:3000/へアクセスすると、初期画面が表示されます。

package.json を見ると分かる通り、シンプル最小構成です。

{
  "name": "nuxt-sample-1",
  "version": "1.0.0",
  "description": "Nuxt.js project",
  "author": "rito <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"
  }
}

nuxt/create-nuxt-app

Nuxt.jsが公式に提供しているプロジェクト作成ツールです。
https://github.com/nuxt/create-nuxt-app

システム要件

以下を満たしている必要があります。

npx（npm 5.2.0からデフォルトでバンドル済み）

インストール

まずは create-nuxt-app 自体のインストールを行います。以下のコマンドでインストール出来ます。

# create-nuxt-app install
npm i -g create-nuxt-app

特に理由なければあちこちで使うので、 -g オプションを付けてグローバルインストールしています。この辺はお好みでどうぞ。

プロジェクト作成

create-nuxt-appを使ってNuxt.jsをインストールする時は、以下の書式でコマンドを作成します。

create-nuxt-app [ Project Name ]

実際にインストールしてみます。

# プロジェクトを作成したい場所へ移動
cd /path/to/dev

# Nuxt.js プロジェクト作成
create-nuxt-app nuxt-sample-2

コマンドを叩くと、いくつか入力＆選択を行います。

# プロジェクト名
? 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 <space> to select, <a> to toggle all, <i> to invert selection)
❯ ◯ Axios
  ◯ Progressive Web App (PWA) Support

# リントツールの選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <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 <space> to select, <a> to toggle all, <i> to invert selection)
❯ ◯ jsconfig.json (Recommended for VS Code)

インストールが完了すると、以下が表示されます。

Successfully created project nuxt-sample-2

  To get started:

   cd nuxt-sample-2
   yarn dev

  To build & start for production:

   cd nuxt-sample-2
   yarn build
   yarn start

この時点でスターターテンプレートとは違い、既に依存パッケージのインストールも完了した状態です。

表示された案内の通りに作成されたプロジェクトへ移動し起動後、ブラウザから http://localhost:3000/ へアクセスするとNuxt.js の初期画面が表示されます。

アプリケーションディレクトリの変更

プロジェクトに色々なツールを導入していくと、設定ファイルやディレクトリなどでごちゃごちゃしてきます。その時には、Nuxt.jsのアプリケーション部分だけ別のディレクトリに移動させるとすっきりします。

インストール時に何を導入したかで作成されるディレクトリやファイルが若干異なりますが、例えば ESLint と Jest を導入した場合のプロジェクトルート配下の内容は以下になっています。

project_dir
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── pages
├── plugins
├── static
├── store
├── test
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── jest.config.js
├──nuxt.config.js

これに１つ新たなディレクトリを作成して、Nuxtアプリケーション部分だけをそこに移動させます。

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

移動させたら、この変更を適用させる為に設定ファイルを編集します。

nuxt.config.js

export default {
  srcDir: 'src', // 追加

アプリケーションディレクトリを指定する記述を追加しています。（追加場所はどこでも大丈夫です。）

ここまでを行ったら改めてNuxtを起動させ、問題なく動作すれば完了です。

まとめ

特に理由がなければ、create-nuxt-appで環境構築していけばスムーズにNuxt.jsでの開発環境を構築できます。

サンプルソース

Contents

開発環境

nuxt-community/starter-template

システム要件

インストール

nuxt/create-nuxt-app

システム要件

インストール

プロジェクト作成

アプリケーションディレクトリの変更

まとめ

Author