【2020年10月】create-nuxt-app で聞かれる項目の意味をまとめました【v3.4.0】

皆さん、こんにちは。どんぶラッコです。

最近 Nuxt.js で実装する機会が減っていたのですが、久々に立ち上げたところ、 create-nuxt-app で聞かれる項目が増えていました！

折角なので、これからNuxt.jsを触り始める皆様に向けて、どういうことが聞かれているのかをまとめてみたいと思います

どんぶラッコ

今回は v3.4.0 を基に進めるよ！

グランくん

すぐに変わってしまうと思うから、更新されていたらコメントください！

create-nuxt-app

Nuxt.jsのアプリを作るときに使う便利コマンドです。

yarn create nuxt-app <project-name>
# または
npx create-nuxt-app <project-name>

コマンドを叩くことで実行できます。

例えば、 sample というディレクトリにプロジェクトを展開したい場合は

npx create-nuxt-app sample

とコマンドを実行します。

ProjectName

? Project name: sample

このプロジェクトの名前です。特に指定しなければコマンドを叩いた時の <project-name> 部分が適用されます。

Programming language

? Programming language: (Use arrow keys)
❯ JavaScript
  TypeScript

TypeScript対応についてです。TypeScriptを選択すると、TypeScript用のモジュールをセットアップしてくれます。

Package manager

? Package manager: (Use arrow keys)
❯ Yarn
  Npm

Yarn を使ってパッケージ管理するか、 Npm を使ってパッケージ管理するかを選択します。特にこだわりがなければ Yarn を選択しておけば大丈夫です。

UI framework

? UI framework: (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js

CSSフレームワークを選択できます。かなり増えましたね！

私は Vuetify.js をよく使っています。 周囲のエンジニアは Tailwind CSS を 使ってる人も多いですね。

Nuxt.js modules

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA)
 ◯ Content

一緒にインストールしたいモジュールを選択することができます。

Axios は APIを叩いて情報取得する上では必須のモジュールなのでインストールしておくべきです。

その他については、必要に応じてのインストールで大丈夫です。

PWAとは、Webページをスマホアプリみたいに使うことができる仕組みです。実はこのブログサイトも対応しています。

Contentとは、Markdown形式でページを構築することができるモジュールです。ヘルプページを作るときに便利ですね！

Linting tools

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint

コード整形ツールをインストールできます。一番最初は ESLint と Prettierを使っておけばOKです。

Testing Framework

? Testing framework: (Use arrow keys)
❯ None
  Jest
  AVA
  WebdriverIO

テストをするためのフレームワークです。私はよくJestを使っています。

Rendering mode

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
  Single Page App

SSRとはサーバサイドレンダリングの略です。どちらを選んでいいかわからないということであれば、最初は Universalモードを選んでおけば大丈夫です。後からでも設定は変更できます！

github username

? What is your GitHub username? hoge

githubアカウントのユーザネームを入力します

version control systems

? Version control system: (Use arrow keys)
❯ Git
  None

バージョンコントロールの方法です。特に理由がなければGitを選択しましょう。

かなり色々なカスタマイズができるようになった分、初心者には使いづらくなってしまった印象があります。

初めてNuxt.jsに挑戦する皆様の助けになれば幸いです！