Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Nuxt.js 2.x + TypeScript 4.x その0001 公式の GET STARTED をやってみる

参考にさせていただいたページ

GitHub nuxt/create-nuxt-app

公式ドキュメント

今日の開発環境

  • Nuxt 2.14.12
  • TypeScript 4.2.3

ディレクトリを作成して移動する

mkdir nuxt_sample
cd nuxt_sample

npx create-nuxt-app する

以下のコマンドを実行します。

npx create-nuxt-app

このコマンドをひとつ実行するだけで、npm initと必要なパッケージのインストールをまとめて行えます。

Project nameから順番に質問に答えて、使用するパッケージを選択していきます。 f:id:motomichi_works:20210429172843p:plain

上に貼ったスクリーンショットのように、◯が付いているときは複数選択できるので、アローキーの上下とスペースキーで選択してenterを押します。
このスクリーンショットでいうと、例えばESLint、Prettier、StyleLintを選択してenterします。

今回は以下の通り選択しましたが、ご自身の環境に合わせて適宜選択してください。

create-nuxt-app v3.5.0
✨  Generating Nuxt.js project in .
? Project name: nuxt_sample
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier, StyleLint
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: Dependabot (For auto-updating dependencies, GitHub only)
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? motomichi-works
? Version control system: Git

選択したパッケージがインストールされて、以下のように表示されました。

🎉  Successfully created project nuxt_sample

  To get started:

    yarn dev

  To build & start for production:

    yarn build
    yarn start

  To test:

    yarn test

yarn dev する

以下のコマンドを実行します。

yarn dev

以下のように表示されました。

ℹ NuxtJS collects completely anonymous data about usage. 
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

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

翻訳すると以下のような感じなので、Y/nいずれかを選択します。

ℹNuxtJSは、使用状況に関する完全に匿名のデータを収集します。 15:47:03 これは、時間の経過とともにNuxt開発者のエクスペリエンスを向上させるのに役立ちます。 https://git.io/nuxt-telemetryで詳細を読む

? 参加に興味がありますか? (Y/n)

選択すると以下のように表示されました。

 WARN  Address localhost:3000 is already in use.

ℹ Trying a random port...

   ╭────────────────────────────────────────╮
   │                                        │
   │   Nuxt @ v2.14.12                      │
   │                                        │
   │   ▸ Environment: development           │
   │   ▸ Rendering:   server-side           │
   │   ▸ Target:      server                │
   │                                        │
   │   Listening: http://localhost:58640/   │
   │                                        │
   ╰────────────────────────────────────────╯

ℹ Preparing project for development
ℹ Initial build may take a while
✔ Builder initialized
✔ Nuxt files generated

✔ Client
  Compiled successfully in 7.49s

✔ Server
  Compiled successfully in 7.11s

ℹ Waiting for file changes
ℹ Memory usage: 247 MB (RSS: 440 MB)
ℹ Listening on: http://localhost:58640/ 

ページを確認する

http://localhost:58640/ にブラウザでアクセスすると今作成したnuxt_sampleのプロジェクトのページが確認できました。

f:id:motomichi_works:20210120155545p:plain

おわりに

とりあえずここまでにして、続きは後日書こうと思います。