PROGBLOG Developers Blog

空想家 Developers Blog

稼ぐ力？　とにかくスキルが欲しい。

nuxt.jsでプロジェクトを作成する（インストール～Hello Nuxt！）

Nuxt.js

Nuxt.js をインストールする

プロジェクトを作成する

npx create-nuxt-app projectName

まずは上記コードをターミナルに記入する。
projectNameはプロジェクトごとに指定する。

その後、いくつか質問されるので用途に合わせて選択していく。

プロジェクト名は？

? Project name: (projectName)

プロジェクト名を質問される。
デフォルト（何も記入せずエンター）では１つ前に記入したプロジェクト名となる。

使用する言語は？

? programing language (Use arrow keys)
> JavaScript
  TypeScript

使用する言語を質問される
矢印キーで選択しエンターキー。

使用するパッケージは？

? package manager (Use arrow keys)
> Yarn
  Npm

パッケージマネージャに関する質問をされる。
慣れている方を選択すればOK。

使用するUIフレームは？

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

UIのフレームワークについて質問される。
使用する場合は使用するフレームワーク選択しエンターキー。

使用するモジュールは？

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

モジュールを選択するかについて質問される。

Axiosは最低限チェックしたほうが良くて、PWAは好みです。 Content はブログなど静的サイトジェネレータライクに利用する場合に導入すると良いようです。
参考サイト

ぜんぶ選択しても問題はなそうなので、わからなければとりあえず選択しておくのも手かもしれない。

【追記：2021.1.3】後で導入可能みたいなので、無理に選択する必要はないかもしれない。逆にぶつかり合うこともあるらしいので。

使用するコードツールは？

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

使用するツールについて質問される。

  • ESLint 括弧やスペースの使い方などの書式スタイルを統一してくれるツール
  • Prettier コードフォーマッターツール
  • Lint staged files Git のコミット時などに Lint のエラーやワーニングがあるとコミットできなくするツール
  • StyleLint CSS の書式スタイルを統一してくれるツール
  • commitlint Git のコミット規約（commit convention）に従わせるためのツール

ぜんぶ選択しても問題はなそうなので、わからなければとりあえず選択しておくのも手かもしれない。

【追記：2021.1.3】全部選択したところ、フォーマットエラーが起こりすぎて作業時間が削られた。チームで作業する分にはコードが統一されるメリットがあるが、無意味に全部選択するのは悪手かもしれない。commitlint は削除した。

使用するテストフレームワークは？

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

テストフレームについて質問される。

SPAにするか？

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

ユニバーサルアプリケーションとシングルページアプリケーションのどちらで作るか質問される。
ユニバーサルアプリケーションはサーバーサイドレンダリング（SSR）を行う。
逆にシングルページアプリケーションはSSRを行わない。
作るアプリに合わせて選択する。

デプロイターゲットは？

? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
  Static (Static/JAMStack hosting)

デプロイターゲットについて質問される。
Server (Node.js hosting) はサーバーサイドレンダリングを行う設定。
Static (Static/JAMStack hosting) は静的サイト用の設定。

開発時の環境ツールは？

? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code)
 ( ) Semantic Pull Requests

開発時に使うツールについて質問される。
jsconfig.json を設定しておくと、VS Codeで開発する際に正しくシンタックスエラーやハイライトが出るようになる。
Semantic Pull Requests はGitのcommitメッセージとPull Requestにおけるタイトルの付け方をチェックしてくれる。

インストールする CI ツールは？

? Continuous integration: (Use arrow keys)
> None 
  GitHub Actions (GitHub only)

インストールする CI ツールについて質問される。
特に指定がなければNoneで問題ない。

バージョンコントロールシステムは？

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

バージョンコントロールシステムについて質問される。
特に指定がなければNoneで問題ない。

プロジェクト作成完了！

Successfully created projectName

これで作成完了。

 To get started:

        cd projectName
        npm run dev

  To build & start for production:

        cd projectName
        npm run build
        npm run start

To get started: の通りにコマンドに記述していく。

最後に匿名で情報収集をしてもいいか？

? Are you interested in participation? (Y/n)

最後に、使用状況の匿名データ収集をしてもいいか聞かれるので回答する。

Hello Nuxt

これでやっと環境構築が完了する。
ブラウザで２つの重なり合う三角形が登場すればNuxt.js のスタートに立てる。

重要だけれど最後に

当然だけれドキュメントが正確なので、ドキュメントを見て作業することをおすすめする。
Nuxt.js - ユニバーサル Vue.js アプリケーション