「create-nuxt-app」を使ったプロジェクトの作成

Nuxt.jsを使ったアプリケーションのプロジェクトを簡単に作成できるツール「create-nuxt-app」で、作成時に選択できる項目についてメモしておきます。

create-nuxt-app のバージョンは2.14.0。

npxまたはyarnでツールを実行します。（npxはNPM5.2.0からデフォルトで使用可能）

npx

npx create-nuxt-app project-name

yarn

yarn create nuxt-app project-name

npxとyarnで微妙に書き方が違うので注意。（yarnの場合、createの後のハイフンがない）

コマンドを実行すると、作成前にいくつかの選択肢が表示されます。

以下、選択できる項目の一覧になります。

プロジェクト名や詳細などの設定（あとで変更可能）。

• Project name
• Project description
• Author name

ここで設定した内容はそれぞれ、package.jsonの name、description、authorや、デフォルトで作成されるpages/index.vueのタイトルなどに設定されます。

パッケージマネージャーの選択。

• Yarn
• Npm

デフォルトではYarnが選択されており、最近ではYarnを使ったサンプルもよく見かけるようになって、メリットもあるので、新規で作るならYarnを選択するのがいいと思います。

npmから乗り換えてわかったYarnの4つのメリット - ICS MEDIA

UIフレームワークの選択。

• None
• Ant Design Vue
• Bootstrap Vue
• Buefy
• Bulma
• Element
• Framevuerk
• iView
• Tachyons
• Tailwind CSS
• Vuesax
• Vutify.js

選択できるフレームワークが多いですが、個人的には「Vutify.js」か「None」で十分。（他のUIフレームワークは正直よく知りません）

サーバサイドのフレームワークの選択。

• None（Recommended）
• AdonisJs
• Express
• Fastify
• Feathers
• hapi
• Koa
• Micro

UIフレームワーク同様にこちらも「Express」以外はほとんど聞いたことないのでなんとも言えませんが、「None」が推奨されているようなので、とりあえず「None」を選択しておいて、必要になったらあとで追加するという方法でいいと思います。

Nuxt.js用モジュールの選択。

• Axios
• Progressive Web App (PWA) support
• DotEnv

Axiosは非同期通信、PWAはWebサイトのモバイルアプリ化、DotEnvは.envファイルに記述した環境変数の読み込み。ここで選択しなくても後で自分で追加することが可能ですが、どれも使いそうなので、個人的には全部選択してもいいような気がします。

コードチェック関連のツールの選択。

• ESlint
• Prettier
• Lint staged files
• StyleLint

サンプルや個人で作成するプロジェクトならそこまで必要ありませんが、複数人が参加するプロジェクトの場合、こういったlint系のツールを入れておくとコードの書き方が統一されるので、メンバー毎に違うといったようなことで、あとで悩まされることが少なくなります。

テスト関連のフレームワーク選択。

• None
• Jest
• AVA

レンダリングモード（SSR、SPA）の選択。

• Universal
• Single Page App

nuxt.config.jsファイルの「mode」に設定されるもので後で変更可能。

Nuxtを使った本番環境などへのデプロイには「SSR」「静的ファイル」「SPA」の3つがあり、それぞれビルドやデプロイ方法が異なります。

コマンド - NuxtJS

開発ツールの選択。

• jsconfig.json
• Semantic Pull Requests

Nuxtの動作を確認したいだけなら、すべてデフォルトのままで作成してしまって大丈夫です。

• インストール - NuxtJS