Nuxt3로 웹 페이지를 만들려면

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

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

페이지와components 제작

pages
├── about.vue
└── index.vue

<template>
    <h1>This is index Page</h1>
</template>

<template>
    <h1>This is about Page</h1>
</template>

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

레이아웃을 디자인하다

먼저 페이지의 외관입니다.

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>

링크

<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>