디렉토리 구조

Nuxt.js 프로젝트 디렉토리 가이드

레이아웃 / 페이지 / 컴포넌트

Nuxt.js 프로젝트는 레이아웃, 페이지, 컴포넌트 디렉토리로 구성됩니다.

layouts

pages

components

레이아웃 디렉토리

페이지 디렉토리

컴포넌트 디렉토리

앱의 시작점 <nuxt/>

앱 페이지 컴포넌트 로드

앱 컴포넌트

Nuxt의 UI 렌더링 기본 골격은 다음과 같습니다.

레이아웃 (default.vue) ← 페이지 (index.vue) ← 컴포넌트 (Logo.vue)

아래 그림의 왼쪽이 레이아웃이고, 오른쪽은 라우팅 된 페이지 뷰를 말합니다. 페이지는 레이아웃을 기본으로 해서 골격을 구성하게 됩니다. 레이아웃에 등록된 헤더, 푸터는 해당 레이아웃을 기본으로 하는 모든 페이지에 공통 적용됩니다.

Layout (Default) 컴포넌트 ⟹ Pages 컴포넌트

아래 코드 예에서는 layouts/default.vue에서 layouts/sections/ 디렉토리 내부 헤더, 푸터를 등록하는 과정을 보여줍니다.

layouts/default.vue
<template>
<section>
<page-header/>
<nuxt/>
<page-footer/>
</section>
</template>
<script>
import PageHeader from './sections/PageHeader'
import PageFooter from './sections/PageFooter'
export default {
name: 'Default Layout',
components: { PageHeader, PageFooter }
}
</script>

아래 그림은 pages/ 디렉토리 내부 파일은 기본적으로 Nuxt.js에 의해 다이내믹 라우트 되어 각 페이지 뷰가 됩니다.

Pages 컴포넌트

디렉토리 구조 및 설정 파일

Nuxt.js 애플리케이션 프로젝트 디렉토리 구조 및 설정 파일은 다음과 같습니다.

디렉토리 이름

설명

layouts

애플리케이션을 구성하는 레이아웃을 포함합니다.

pages

내부에 있는 모든 Vue 파일은 라우팅 됩니다.

components

내부에는 Vue 컴포넌트 파일을 포함합니다.

assets

컴파일 되지 않는 정적 에셋(CSS, JS, Sass 등)을 포함합니다.

plugins

Vue 애플리케이션이 생성되기 전 실행하고 싶은 JS 플러그인을 포함합니다.

store

Vuex Store 파일을 포함하는 디렉토리 입니다. (index.js 파일 생성되면 자동 활성화)

static

정적 파일들을 포함하는 디렉토리로 내부의 파일들은 루트 패스(/)에 연결됩니다.

middleware

페이지 또는 레이아웃을 렌더링 하기 전에 실행 할 수 있는 사용자 정의 함수를 포함합니다.

파일 이름

설명

package.json

애플리케이션의 기본 정보 및 의존성 패키지 정보, 스크립트 등을 포함합니다.

nuxt.config.js

Nuxt.js 애플리케이션 환경 설정으로 사용자가 입맛에 맞게 구성할 수 있습니다.

Nuxt.js 애플리케이션의 특정 라우트를 위한 데이터, 뷰에 대해 이해할 수 있습니다.

Document > Layout > Pages > Page Child | HTML Head

Views - Nuxt.js

참고