前回までのあらすじ
準備が完了しましたよね
#1では、Nuxt3をインストールして実際にWebサイトを立ち上げるところまでやりました。お絵描きでいうところの「画用紙を買ってきた」状態ですね。笑 なので今回はこのサイトに肉付けして"なんか実際にありそうな"Webページを一つ作っていきましょう！
Nuxtでサイトを作っていこう！#2
まずは"ページ"を作ろう
ページを作る前に、Nuxt3のフォルダ構造について説明しましょう。 publicやnode_modulesなど、app.vueにnuxt.config.ts ...と訳のわかんないものがたくさんあると思います。さらには新しくフォルダを作ることで自動的に効果が破棄されるものもあります。ここで全部を説明するとややこしくなるので、一旦"ページを作る"だけに必要なものだけを説明しますね。 それは、"pages"というフォルダーを作りそのフォルダー内に、ページに関するソースコードを入れていくだけ、です！ ※あとは初回のみ app.vue をいじるだけです。
※↓以下は今後必要になりうるフォルダーたちです。(一旦は無視で大丈夫です。)
△△△(プロジェクト名)
|- .nuxt
|- .gitignore
|- .npmrc
|- assets
|- components
|- layouts
|- pages ←このフォルダーでページの管理ができる。
|- plugins
|- server
|- composables
|- node_modules
|- public
|- app.vue
|- nuxt.config.ts
|- package.json
|- package-lock.json
|- README.md
|- tsconfig.json
はやくページ作らせてよ。
前置きが長くなってしまったので、早速やっていきましょう！ やる手順は４つのみ。 ・app.vue にあるデフォルト設定を変える。 ・pagesフォルダーをつくる。 ・pagesフォルダーの中に index.vue ファイルを作る。 ・index.vue をいじる。 1,app.vue にあるデフォルト設定を変える
<template>
<div>
<NuxtPage />
</div>
</template>
2,pagesフォルダーをつくる。 これは単純に、プロジェクトのファイルを開いて、右クリックで新規フォルダを作成でも、Visual Studio codeの機能でやっても、コマンドでやってもどれでも構いません。 とりあえずプロジェクトの配下にpagesというフォルダーが作れればOKです。 3,pagesフォルダーの中に index.vue ファイルを作る。 先ほど作ったpages フォルダーの中に index.vue というファイルを作りましょう(※ここはフォルダーじゃないですよ！) 中身は空っぽで大丈夫です。これもVisual Studio codeの機能とかでもできます。※最悪邪道なやり方は、適当に持ってきたテキストファイルとかの名称をindex.vue にしてもできちゃいますが、バグる可能性がるのであんまやらない方がいいです。。。笑 1~3を経てフォルダー内はこんな感じになっていればOKです。
△△△(プロジェクト名)
〜〜〜〜〜〜
|- pages
|- index.vue
〜〜〜〜〜〜
その他いっぱい
やっとかよ。。。笑
お待たせしました。もうこれでサイトを立ち上げると、最初にindex.vueの内容が表示されます！ ※んまでも、今のindex.vue は何もないので表示されないかエラーになりますが、、、 なのでまずは、表示ができるところまでやってみたいので index.vue の中身を以下のようにしてみてください。
<template>
<h1>Hello Nuxt3!</h1>
</template>
え、こんなもんなの？と思った方、そうです。こんなもんなんです。もうこれでWebサイトは完成です！（中身自体は質素ですが、、、） 実際にWebサイトを立ち上げてみましょう！ やり方は前回でも教えた通りです。
※プロジェクトのフォルダーにいない場合
cd C:¥users¥aaaaaa¥Desktop¥Nuxt_products/△△△
※これは一応しておく
npm i
npm run dev
これで、http://localhost:3000/ を開くと、白い背景に「Hello Nuxt3!」と表示されていると思います。 つまり、この index.vueを編集すれば自分の思い通りなWebページが作れていけます！ 次回は簡単なデザインや処理の部分など Nuxt3の根本 Vue3についてお話しします。