最低限の知識と環境構築① ～Nuxt3編～

Nuxtとは？

VueのFWである。
Reactから見た、Nextのようなもの。（名前も似てる）
バージョン2,3で書き方が全然違うので、キャッチアップする際は注意する。
TypeScript使える。

知識に関してはこれくらいでいいと考えています。
経験してきて分かりましたが、とりあえず手を動かしてエラーと格闘しないと何もできるようにならないです。

Nuxt3のプロジェクトをWebページで表示する

好きな場所で以下コマンド実行して、プロジェクトの作成をする。

npx nuxi@latest init <project-name> // 公式そのまま

コマンドを実行すると、次のように表示されるので好きなものを選んでください。
ここではnpmを選択します。

次にこのように表示される。

Git リポジトリを初期化するかどうかの確認を聞かれるので、これも好きな方を選択してください。
ここではYesにします。

この表示がでれば完了です。

表示されたとおりコマンドを実行すると、次のように表示されるのでhttp://localhost:3000/にカーソルをあてて、Ctrl + クリックする。

この画面が表示されれば、プロジェクトの作成は完了です。

srcディレクトリを使う

作られたプロジェクトをみるとsrcディレクトリがないので、srcを作っていきます。

正直必須ではないのですが、現場のプロジェクトでは使われていて、Next.jsと構造を合わせるために設定します。

srcディレクトリを作る

方法はなんでもよいので、srcディレクトリを作ります。
（なんでもよいと書いたのは、環境や知識によって作り方は違うので出来る方法で作ってください。ここで悩むと時間がもったいないです。）
作成後は以下のようになる。

nuxt.config.tsを開き、以下の設定を追加する

初期設定の段階では次のようになっているはずです。

次のように修正してください。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  srcDir: 'src/', // 追加部分
})

src配下にディレクトリとファイルの作成

次の手順で必要になるディレクトリとファイルを作ってください。
①src配下にpagesディレクトリを作成
②pages配下にindex.vueファイルを作成
作成後イメージ

pagesディレクトリは必須だと思うのに、なんでプロジェクト作成時に自動で作られないのが謎

index.vueに表示確認用の定義を書く。

表示確認用の為、簡単でよい。
私は以下の形で作りました。

<template>
  <div>
    <h1>Welcome to Nuxt 3!</h1>
    <p>This is a simple index page.</p>
  </div>
</template>
  
<script setup>
</script>
  
<style scoped>
</style>

こういった画面が表示されていれば、成功です。

app.vueファイルの移動

移動をしなくても、機能はするのですがプロジェクトが大きくなる場合、ソースコード（pages/ や components/）と設定ファイル（nuxt.config.ts など）を明確に分離するために変更しておきます。

移動後イメージ

ただ、この移動をするといままで表示されていたindex.vueの内容が表示されず最初に表示されていた画面に戻ってしまいます。（戻らない場合はリロードしてください）

index.vueを表示するために移動したapp.vueファイルの内容を次のように変更します。

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

ファイル内容を変更後、表示画面がindex.vueの内容に変更されていれば設定が正常に完了しています。

長くなってしまったので、②に続きます。
②ではESLintとtailwindCSSの設定をしていきます。