- Nuxt 3のインストール まず、Nuxt 3をインストールするためには、Node.jsのランタイムとnpmパッケージマネージャが必要です。これらがインストールされていない場合は、先にインストールしてください。次に、以下のコマンドを実行してNuxt 3のCLIツールをグローバルにインストールします。
npm install -g create-nuxt-app- 新規プロジェクトの作成 Nuxt 3では、CLIツールを使用して新しいプロジェクトを作成します。以下のコマンドを実行して、プロジェクトの名前とテンプレートを選択します。
npx create-nuxt-app <project-name>CLIツールがプロジェクトの基本構造を自動的に作成し、必要な依存関係をインストールします。また、開発サーバーを起動してプロジェクトをプレビューすることもできます。
- ページの作成
Nuxt 3では、ページを作成するために
pagesディレクトリを使用します。新しいページを作成するには、pagesディレクトリ内にVueコンポーネントを作成します。
例えば、pages/index.vueというファイルを作成すると、ルートパス(/)に対応するページが作成されます。また、動的なルートパスを扱うためには、ファイル名を[param].vueのように命名することもできます。
- ルーティングの設定
Nuxt 3では、ルーティングを設定するために
nuxt.config.jsファイルを使用します。このファイルにルートのパスやパラメータを指定することができます。
例えば、以下のようにnuxt.config.jsファイルでルートのパスを設定することができます。
export default {
router: {
base: '/blog/'
}
}- コンポーネントの作成
Nuxt 3では、再利用可能なコンポーネントを作成するために
componentsディレクトリを使用します。コンポーネントはVueのシングルファイルコンポーネントとして作成します。
例えば、components/MyComponent.vueというファイルを作成すると、<MyComponent>というタグでコンポーネントを使用することができます。
以上が、Nuxt 3の新規プロジェクト作成と基本的な機能の紹介です。これにより、効率的なVue.jsベースのWeb開発が可能になります。詳細なドキュメントやコード例については、公式のNuxt 3のドキュメントを参照してください。