【Nuxt.js】プロジェクト作成ツール[v3系]での作成方法を紹介

こんばんは、タロウです。

前回こちらで紹介したテンプレートプロジェクト作成ツールですが、
メジャーバージョンがリリースされ、v3.2.0(2020/9/11現在)となりましたので、最新バージョンでのインストール方法を紹介します！

変更点

2020/06にメジャーバージョンアップ(v2.15.0 → v3.0.0)
対話内容に若干変更

大きくは変わらず、対話式で使用するツールやプラグイン、構成を聞かれるので
答えて進めていくだけです。

動作環境

“-v”をつけてバージョンを確認します。
※-vというプロジェクトが作成されるわけじゃなのでご安心を！

$ npx create-nuxt-app -v
create-nuxt-app/3.2.0 win32-x64 node-v12.18.3

プロジェクトを作成する

まずは作成したいディレクトリに移動して、
テンプレートプロジェクト作成コマンドを実行します。

npx create-nuxt-app [プロジェクト名]

任意のプロジェクト名をつけて作成します。
ここではプロジェクト名を「v3_test」を付けています。

create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in v3_test
? Project name: v3_test
? Programming language: TypeScript 
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier    
? Testing framework: None
? Rendering mode: Single Page App    
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript), Semantic Pull Requests
warning nuxt > @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
warning nuxt > @nuxt/cli > @nuxt/static@1.0.0: this feature has been moved to the core. you can directly use nuxt generate
warning nuxt > @nuxt/webpack > @nuxt/babel-preset-app > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
yarn run v1.22.5
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
Done in 6.47s.

�  Successfully created project v3_test

  To get started:

        cd v3_test
        yarn dev

  To build & start for production:

        cd v3_test
        yarn build
        yarn start


  For TypeScript users.

  See : https://typescript.nuxtjs.org/cookbook/components/

? Project name

プロジェクト名を設定します。
未入力の場合は最初に実行したコマンドで指定したプロジェクト名が設定されます。

? Programming language:

開発言語を指定します。

JavaScript
TypeScript

v3ではTypeScriptが選択できるようになっています。
nuxtを使用した開発でもTypeScriptを使用するのが主流になりつつあるので、
ここで指定できるのは便利ですね。

? Package manager:

パッケージ管理ツールを選択します。

Yarn
Npm

どちらでも好きなほうを選びます。
Yarnの方が依存パッケージに強いので、Yarn推しです。

? UI framework:

UIフレームワークを設定します。

None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Chakra UI
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuesax
Vuetify.js

好きなフレームワークを選択します。
豊富なUIパーツに、日本語ドキュメントと使い勝手が良いので、Vuetifyが一番人気だと思います！

? Nuxt.js modules:

moduleを選択します。
よく使うものなので、ここでインストールしておくと便利です。

Axios
Progressive Web App (PWA)
Content

Axios

非同期通信を簡易化させるモジュールで、必ずとと言っても良いほど選択したほうが良いです。
バックエンド側で作成したREST APIや、外部システムのAPIを呼ぶ際に使用します。

Progressive Web App (PWA)

Progressive Web Appsの略で、数年前から話題になっている概念です。
Webアプリ/Wedサイトをネイティブアプリのように動かすことができます。

Content

v3から選択できるようになったヘッドレスCMSを可能とするモジュールです。
※モジュール自体は2020/05にメジャーバージョンがリリースされています。
Markdown形式で記載できるので、.mdに慣れている人はこっちのほうが書きやすいかもしれません。

? Linting tools:

Lintツールを設定します。
言わずとしれたツールばかりなので、複数人で開発する場合はいれておきましょう。

ESLint
Prettier
Lint staged files
StyleLint

ESLint

JavaScriptのコードチェックツールで、まず入れるに越したことはありません。

Prettier

コードフォーマッターで、インデントやセミコロンなど自動で整えてくれるツールです。
複数人で開発を行う場合、コードの書き方をそろえるために導入しているプロジェクトが多いです。
もちろん1人で開発の場合も、自動でキレイなコードに整えてくれるので可読性の良いコードになります。
VSCode(開発ツール)のPrettierについてはこちらにかなり詳しく書いています！