参考にさせていただいたページ
GitHub nuxt/create-nuxt-app
公式ドキュメント
- 日本語: インストール - NuxtJS
- 英語: Installation - NuxtJS
今日の開発環境
- 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から順番に質問に答えて、使用するパッケージを選択していきます。
上に貼ったスクリーンショットのように、◯が付いているときは複数選択できるので、アローキーの上下とスペースキーで選択して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のプロジェクトのページが確認できました。
おわりに
とりあえずここまでにして、続きは後日書こうと思います。