Nuxt.jsを使ってみる

開発環境は、Windows 10 Pro(64bit) + node v14.17.0 + npm 6.14.13。

1.Cドライブ直下にnuxtという名前のディレクトリを作成し、カレントディレクトリしておく

cd c:\ && mkdir nuxt && cd nuxt

2.公式サイトへアクセスし、はじめるボタンをクリック

3.create-nuxt-appを使うために以下のコマンドを入力し、パッケージをインストール
※npxはnpm 5.2.0以降だとデフォルトで入っている

npx create-nuxt-app hellonuxt

4.対話モードになって、Project name:と表示されるので、ここは、入力したプロジェクト名であるhellonuxtのままで良いので、Enter。

5.Programming language:で、TypeScriptを選んで、Enter。

6.Package manager:で、Npmを選んで、Enter。

7.UI framework:でVuetify.jsを選んで、Enter。

8.Nuxt.js modules:で、特に何も選ばずに、Enter。

9.Linting tools:で、特に何も選ばずに、Enter。

10.Testing framework:で、Jestを選んで、Enter。

11.Rendering mode:で、Universal(SSR /SSG)を選んで、Enter。

12.Deployment target:で、Server (Node.js hosting)を選んで、Enter。

13.Development tools:で、何も選ばずに、Enter。

14.Continuous integration:でNoneを選んで、Enter。

15.Version control system:で、Gitがすでにインストールされているので、Gitを選んで、Enter。ここで、再び、インストールが開始されるので、しばらく待つこと。

16.インストールが終了したら、以下のコマンドを入力し、サーバーを実行し、localhostにアクセスすする。

cd hellonuxt
npm run dev

サーバーが以下のように実行したら、

localhost:3000にWebブラウザでアクセスする。ここから、クライアント側とサーバー側の両方でバンドルが始まり、ちょっと時間がかかります。終了すると、以下のように表示されます。

■参考リンク
Learn Nuxt.js by Building a Real World App
Nuxt.jsのビデオコースです。