Nuxt는 애플리케이션의 UI를 구현하기 위해 여러 컴포넌트 레이어를 제공합니다.

app.vue


https://nuxt.com/assets/docs/getting-started/views/app.svg

기본적으로 Nuxt는 이 파일을 **진입점(entrypoint)**으로 처리하고 애플리케이션의 모든 경로에 대한 콘텐츠를 렌더링합니다.

실습

Components


https://nuxt.com/assets/docs/getting-started/views/components.svg

대부분의 컴포넌트는 버튼(<Button>)이나 메뉴(<Menu>)와 같이 재사용 가능한 UI의 일부입니다. Nuxt에서는 이러한 컴포넌트는 components/ 디렉토리에 생성할 수 있으며 명시적으로 가져올 필요 없이 애플리케이션 전체에서 자동으로 사용할 수 있습니다.

실습

Pages


https://nuxt.com/assets/docs/getting-started/views/pages.svg

페이지는 특정 URL(route)로 접속 했을 때 해당 URL에 매핑된 페이지 컴포넌트(라우트 컴포넌트)를 말합니다. pages/ 디렉토리의 모든 파일은 파일 이름을 기반으로 URL에 매핑되어 화면에 표시됩니다.

페이지를 사용하려면 pages/index.vue 파일을 생성하고 <NuxtPage /> 컴포넌트를 app.vue에 추가합니다(또는 기본 항목의 경우 app.vue를 제거). 그렇게 되면 pages/ 디렉토리에 새 파일을 추가하여 더 많은 페이지와 해당 경로(URL)를 생성할 수 있습니다.