Nuxt 구조

Nuxt 프로젝트를 최초로 생성하면 아래와 같은 폴더구조로 생성이 된다.

 

각 폴더별로 어떤 기능을 하는지 알아보자. 위에 나와있지 않더라도 필요에 의해 직접 생성하면 된다.

 

▪️ components : 재사용이 자주되는 뷰 파일들을 관리한다.

▪️ node_modules : nuxt에 필요한 package들이 있고, npm이나 yarn으로 설치하는 lib 들이 여기에 들어간다.

▪️ pages : 애플리케이션의 view 디렉토리다. 언더바(_)로 파일명이 시작할 경우 동적으로 라우팅된다. 예를들어 특정 id 값을 가진 todo를 보고 싶다면 pages/todo/_id.vue 형태로 구성하면 localhost/todo/1로 접근하면 된다.

▪️ static : 서버 루트에 직접 매핑되어 바뀌지 않을 파일을 넣는 디렉토리. 대표적으로 파비콘(favicon) 있다.

▪️ store : Vuex Store를 넣는 디렉토리. Vuex Store는 Nuxt.js와 함께 제공되지만 기본적으로 비활성화되어 있다. 이 디렉터리에 index.js 파일을 만들면 스토어가 자동으로 활성화된다.

▪️ middleware : 페이지 또는 페이지 그룹 (레이아웃)을 렌더링 하기 전에 실행할 수 있는 사용자 정의 기능을 정의할 수 있다. 라우터기능.

▪️ layouts : 특정 page의 layout을 변경하고 싶을 때 사용함. layouts/default.vue 생성하면 모든 pages에 동일하게 적용

▪️ plugins : 최상위 Vue.js 애플리케이션을 인스턴스 화하기 전에 실행할 자바 스크립트 플러그인이 포함되는 디렉토리다.

외부 Vue 플러그인에 함수 또는 상수 추가할 수 있다.

▪️ nuxt.config.js : Nuxt.js 애플리케이션의 설정 파일. 모듈을 추가하거나 빌드설정, 메타정보 설정등이 가능하다.

▪️ package.json : 의존성 관리

▪️ tsconfig.json : typescript 컴파일 구성 설정