Nuxtを始めよう

イントロダクション

Nuxt 3は、Vue.jsをベースにしたフレームワークで、モダンなWebアプリケーションを構築するための多くの機能を提供します。この記事では、Nuxt 3を使って新しいプロジェクトを始めるための基本的な手順を説明します。

Nuxtプロジェクトの作成

1. Node.jsのインストール 最初に、Node.jsの最新安定版をインストールします。以下のコマンドを使用して、Node.jsをインストールし、最新バージョンに更新できます。

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

2. Node.jsのバージョン確認 次に、以下のコマンドでNode.jsのインストールされたバージョンを確認します。

node -v
# 出力例: v17.3.0

3. Nuxtプロジェクトの初期化 Nuxtプロジェクトを作成するには、以下のコマンドを実行します。

npx nuxi init nuxt-app

このコマンドは、Nuxtアプリケーションのボイラープレートを作成し、次の手順を指示します。

🎉 Another neat Nuxt project just made! Next steps:

📁 `cd nuxt-app`

`npm install` または `yarn install` で依存関係をインストールする。

`npm run dev` または `yarn dev` で開発サーバを起動します。

4. 依存関係のインストール プロジェクトディレクトリに移動し、依存関係をインストールします。

cd nuxt-app
npm install

5. 開発サーバの起動 最後に、以下のコマンドで開発サーバを起動します。

npm run dev

これにより、以下のような出力が表示され、ブラウザで http://localhost:3000 にアクセスすることで、作成したNuxtアプリケーションを見ることができます。

Nuxt CLI v3.0.0-rc.3
  > Local:    http://localhost:3000/
  > Network:  http://192.168.100.6:3000/
  > Network:  http://192.168.100.4:3000/

ℹ Vite server warmed up in 341ms
ℹ Vite client warmed up in 993ms
✔ Vite server built in 836ms
✔  Nitro built in 386ms

6. まとめ この記事では、Nuxt 3を使って新しいプロジェクトを始める基本的な手順を紹介しました。これらのステップに従って、Nuxtベースのプロジェクトを簡単に開始できます。

Nuxtのプロジェクト構造を理解する

Nuxtプロジェクトと通常のVueプロジェクトは、以下のように異なる構造を持っています。

# Nuxtプロジェクト構造
├── package.json
├── tsconfig.json
├── nuxt.config.ts
├── app.vue
├── README.md
└── node_modules
    └── ...

# Vueプロジェクト構造
├── package.json
├── vite.config.js
├── index.html
├── node_modules
│ └── ...
├── public
│ └── favicon.ico
└── src
    ├── App.vue
    ├── main.js
    ├── components
    │ └── HelloWorld.vue
    └── assets
        └── logo.png

Nuxtプロジェクトでは、特定のディレクトリが特定の役割を担っています。

# Nuxtプロジェクトディレクトリ
├── components
├── composables
├── assets
├── public
├── layouts
├── pages
├── plugins
├── store
├── server
├── middleware
└── modules

nuxt.config.ts ファイル

Nuxtの設定は、nuxt.config.tsファイルで行われます。このファイルでは、Nuxtの動作をカスタマイズすることができます。

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
})

.gitignore ファイル

.gitignoreファイルには、Gitリポジトリに含めないファイルやディレクトリを指定します。

# .gitignore
node_modules
*.log
.nuxt
nuxt.d.ts
.output
.env

.nuxt と .output ディレクトリ

.nuxtディレクトリは、開発時に生成される一時ファイルを含みます。.outputディレクトリは、ビルド時に生成されるファイルを含みます。

まとめ

この記事では、Nuxt 3を使ったプロジェクトの開始方法と基本的なプロジェクト構造について解説しました。これらの基本を理解することで、Nuxtを使用した開発がよりスムーズになります。