Nuxt3のプロジェクトの立ち上げと初期ファイル

Nuxt3の新規プロジェクトの作成方法については公式サイトの通りにコマンドを実行するだけですので非常に簡単です

ただし、Nuxtで検索してGet StartedをクリックするとNuxt3ではなくNuxt2のドキュメントになると思います(2022・07・21時点)

先日お伝えした通り現在はまだRC版(リリース候補版)です

ということでまだ開発途中となりますのでRC版を利用する場合はそれを理解したうえで利用しましょう

Nuxtで検索してサイトの上部にRC版へのリンクがありますのでそちらをクリックしてGet Startedへと進みましょう

コマンド1つで即作成

Nuxt2は組み込むライブラリや、レンダリング方法まであらゆることをプロジェクト作成時に聞かれてそれをもとにディレクトリやファイル、プラグインが設定されました

便利でもありますが、やや時間のかかる作業です

Nuxt3ではあとで必要なものを加えていく形式ですのでプロジェクトの立ち上げはとても速いです

ちなみにコマンドは

npx nuxi init プロジェクト名

です

その後

>cd プロジェクト名

で、作業ディレクトリに移動して(この辺はたいていのジェネレータで同じですね

>yarn install (npmやpnpmでもOK)

で必要なモジュールをインストールするとプロジェクトは完了です

app.vue

立ち上げると

デモ画面が現れます

最初のapp.vueには

NuxtWelcomeというタグがあるだけです

最初から準備されているタグのようです

こちらを削除して書き換えていくことになります

1ページのみのサイトであれば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もどうぞよろしく!

コメント

タイトルとURLをコピーしました