🐷
Nuxt3でwebページを作る手順(移管済)
全5回のうち1つ目です。
Nuxt3アプリ立ち上げ
// アプリケーションフォルダに移動後
$ npx nuxi init .
// パッケージ依存の作成
$ yarn install
ここで以下のようなフォルダ構成になっているはずです。
.
├── README.md
├── app.vue
├── node_modules
├── nuxt.config.ts
├── package.json
├── tsconfig.json
└── yarn.lock
起動して、ページが立ち上がることを確認しましょう。
$ yarn dev
Nuxt CLI v3.0.0-27307420.6a25d3e
> Local: http://localhost:3000/
> Network: http://192.168.1.2:3000/
ℹ Vite warmed up in 645ms
✔ Vite server built in 1038ms
✔ Nitro built in 147 ms
ここで見ているのは、app.vueに書かれている内容です
<template>
<div>
<NuxtWelcome />
</div>
</template>
pagesとcomponentsの作成
nuxt2では立ち上げと同時にlayoutsやpagesが作成されましたが、nuxt3ではそういった世話はしてくれず自分で作ることになります。
個人的には、デフォルトで作られるlayouts/defaultから不要なタグを削除したりinspireページを削除するのが手間だったため、これらのページが自動で作られなくなってよかったと思います。
といってもこのままでは何から手をつけていいかわからないので、最低限の構成を作りましょう。
pagesにindexとaboutという二つのファイルを作ります
pages
├── about.vue
└── index.vue
pages/index.vue
<template>
<h1>This is index Page</h1>
</template>
pages/about.vue
<template>
<h1>This is about Page</h1>
</template>
このままでは反映されないで、app.vueのNuxtWelcomeを書き換えます
<template>
<div>
<NuxtPage />
</div>
</template>
これでlocalhost:3000/aboutでaboutページが表示されるはずです。
レイアウトを作る
もうちょっと現実的なページにしていくために、ヘッダーとサイドバーをつけます。
(ただし、本番のデザインはTailwindやVuetifyで作りあげますので、ここでは最小限のCSSで記述します)
まずはページの見た目
app.vue
<template>
<div>
<Header class="header" />
<div class="middle">
<Navigation class="navigation" />
<NuxtPage class="main"/>
</div>
</div>
</template>
<style>
.header{
position: fixed;
width: 100%;
height: 50px;
z-index: 1;
}
.middle{
position:absolute;
top:50px;
display:flex
}
.navigation{
position: fixed;
height: 100%;
width:150px;
}
.main{
position: relative;
left:150px
}
</style>
components/Header.vue
<template>
<div class="header">
<h1>タイトル</h1>
</div>
</template>
<style>
.header{
background-color:blue;
color: aliceblue;
display:flex;
}
</style>
components/Navigation.vue
<template>
<div class="navigation">
<ul>
<li>インデックス</li>
<li>アバウト</li>
</ul>
</div>
</template>
<style>
.navigation{
background-color:lightgrey;
padding: 12px;
}
</style>
pages/index.vue
<template>
<div>
<h1>This is index Page</h1>
<div v-for="n in 10" :key="n" class="article">
<h3>タイトル {{n}} </h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt perspiciatis repudiandae eveniet at totam? Animi sapiente, ipsam sed laudantium hic saepe modi adipisci odio commodi deserunt nihil expedita amet aperiam.
</p>
</div>
</div>
</template>
<style scoped>
.article{
margin: 8px;
}
</style>
リンク
インデックスとアバウトに<nuxt-link>タグを入れて、リンクできるようにします。
components/Navigation.vue
<template>
<div class="navigation">
<ul>
<li>
<nuxt-link to="/">インデックス</nuxt-link>
</li>
<li>
<nuxt-link to="/about">アバウト</nuxt-link>
</li>
</ul>
</div>
</template>
<style>
.navigation{
background-color:lightgrey;
padding: 12px;
}
</style>
これでとりあえず枠組みはできました。
Viteの速さに感動です。
次からはTailwindcssを導入します。
Discussion