Nuxt3の新規プロジェクトの作成方法については公式サイトの通りにコマンドを実行するだけですので非常に簡単です
ただし、Nuxtで検索してGet StartedをクリックするとNuxt3ではなくNuxt2のドキュメントになると思います（2022・07・21時点）
先日お伝えした通り現在はまだRC版（リリース候補版）です
ということでまだ開発途中となりますのでRC版を利用する場合はそれを理解したうえで利用しましょう
Nuxtで検索してサイトの上部にRC版へのリンクがありますのでそちらをクリックしてGet Startedへと進みましょう
コマンド１つで即作成
Nuxt2は組み込むライブラリや、レンダリング方法まであらゆることをプロジェクト作成時に聞かれてそれをもとにディレクトリやファイル、プラグインが設定されました
便利でもありますが、やや時間のかかる作業です
Nuxt3ではあとで必要なものを加えていく形式ですのでプロジェクトの立ち上げはとても速いです
ちなみにコマンドは
npx nuxi init プロジェクト名
です
その後
>cd プロジェクト名
で、作業ディレクトリに移動して（この辺はたいていのジェネレータで同じですね
>yarn install (npmやpnpmでもOK)
で必要なモジュールをインストールするとプロジェクトは完了です
app.vue
立ち上げると
デモ画面が現れます
最初のapp.vueには
NuxtWelcomeというタグがあるだけです
最初から準備されているタグのようです
こちらを削除して書き換えていくことになります
１ページのみのサイトであればapp.vueのみで作成できますが、たいていの場合は複数ページを組み合わせたサイトやアプリケーションになるはずです
その場合はpagesというディレクトリを準備しましょう
pagesディレクトリ ルーティングが超簡単
従来であればページごとにURLを設定してルーティングの処理を書く必要があります
VueRouterは便利ですが、ルーティングの設定を書いておかなければなりません
これが意外と面倒です
ページを書いたら必ずルーティングの処理を更新するという作業が入るため（あとでまとめてでもよいのですが、私は忘れてしまいそうなのですぐに作っていました）多くなってくると大変です
Nuxt3の特徴の一つですが、pagesにvueファイルを作成するだけで自動的にルーティング処理が施されます
index.vue
まずは必ず必要になるHomeの設定です
index.vue
ファイルを作成しましょう
それが自動的にHomeとなります
いわゆる”/”のみとなります
開発時はlocalhost:3000/でindex.vueの内容が表示されます
それ以外のルーティングは
例 secondpage.vueであれば ~/secondpageというURLになります
非常にわかりやすいです
直接URLを打ち込んでももちろんページ遷移はされます
NuxtLinkを使ってリンクをさせよう
NuxtLinkタグを使えば簡単にリンクを作成できます
タグ内にto＝”リンク先”という属性を追加すればよいだけです
<NuxtLink to=”/secondpage”>to Secondpage </NuxtLink>
これだけです
とても簡単にリンクが作成できます
ここまでのまとめ
このように、Nuxt3ではあらかじめ決められたディレクトリを必要に応じて作成して、
そこに必要なファイルを追加していくことで、中身を作っていくことができます
無駄がないのでとても見やすいですし、全体像を把握しやすくなっています
公式のドキュメントを確認しつつ必要な部品をそろえていけばサクサク作れるというイメージです
今後、そのほかのディレクトリの確認やAPIなども確認していきたいと思います
YouTubeもどうぞよろしく！
コメント