create-nuxt-appでNuxt.jsを導入する

create-nuxt-appを使ってみた際、色々な質問があり分からず調べるということがあったので、その時に調べたことをメモしておきます。

インストール

create-nuxt-appを使う注意点として、v6.1以上のnpmかyarnがインストールされている必要があるようなので事前に確認ください。
ターミナルでプロジェクトフォルダを作成したいディレクトリに移動して、下記を実行します。

npm init nuxt-app プロジェクト名

yarnの場合は下記になります。

yarn create nuxt-app プロジェクト名

実行後に以降の質問が開始されますが、質問内容は現時点でのものなので、将来変更されている可能性がある点ご注意ください。

Project name

最初にプロジェクト名を聞かれます。
特に指定しなかった場合、最初に指定したプロジェクト名が使用されます。

Project name

Programming language

プログラミング言語をJavaScriptかTypeScriptから選択します。

Programming language
> JavaScript
  TypeScript

Package manager

使用するパッケージマネージャーをYarnかNpmから選択します。

Package manager
> Yarn
  Npm

UI framework

UI frameworkの選択です。
こちらにそれぞれのフレームワークのリンクがありますので、個別の詳細はそちらから確認できます。

UI framework
> None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Framevuerk
  Oruga
  Tachyons
  Tailwind CSS
  Windi CSS
  Vant
  View UI
  Vuesax
  Vuetify.js

GitHubでのスター数だとElementTailwind CSSVuetify.jsなどが人気があるようです。

Nuxt.js modules

Nuxt.jsのモジュールの選択です。
AxiosPWAContentから複数選択できます。

Nuxt.js modules
>( ) Axios - Promise based HTTP client
 ( ) Progressive Web App (PWA)
 ( ) Content - Git-based headless CMS

Linting tools

コードのチェックツールを選択します。

>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files
 ( ) StyleLint
 ( ) Commitlint

Testing framework

テストで使用するフレームワークを選択します。

Testing framework
> None
  Jest
  AVA
  WebdriverIO
  Nightwatch

Rendering mode

レンダリングの方法をSSR/SSGかSPAから選択します。

Rendering mode
> Universal (SSR / SSG)
  Single Page App

Deployment target

SSRかSSGかを選択します。

Deployment target
> Server (Node.js hosting)
  Static (Static/Jamstack hosting)

Development tools

開発ツールを選択します。
VS Codeを使用する場合、jsconfig.jsonを選択しておくとよさそうです。

Development tools
>( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)

What is your GitHub username?

GitHubのユーザー名を入力します。

What is your GitHub username?

Version control system

バージョン管理の選択です。

Version control system
> Git
  None

以上で質問が完了して、回答に沿ったインストールが実行されます。
インストール完了後はプロジェクトディレクトリに移動して、あとは通常通り使用できます。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年7月
 123
45678910
11121314151617
18192021222324
25262728293031