[Vue.js] Nuxt.js - 기본 프로젝트 구조

Nuxt.js에 스캐폴딩된 디렉토리 구조를 파악해보자. (기본 템플릿 사용)

nuxt
├ assets
├ components
├ layouts
├ middleware
├ pages
├ plugins
├ static
├ store

assets

css, image, font 나 LESS, SASS, Javascript 같은 컴파일되지 않은 에셋들을 포함한다.

components

Vue.js 컴포넌트를 포함하는 디렉토리로 애플리케이션에서 사용될 컴포넌트를 포함한다.

해당 경로에 위치된 컴포넌트들은 Nuxt.js의 비동기 데이터 함수인 asyncData 또는 fetch를 사용할 수 없다.

layouts

애플리케이션 전체에 대한 레이아웃을 포함한다.

기본으로 default.vue가 생성되어 있을 것이고 상황에 맞게 layout을 생성할 수 있다.

* 해당 디렉토리는 이름을 변경할 수 없다.

middleware

애플리케이션에서 사용될 middleware를 포함한다. middleware는 페이지 또는 레이아웃이 렌더링 되기 전에 실행이 되며, middleware를 페이지나 레이아웃에 바인딩하였다면 해당 페이지나 레이아웃이 실행되기 전에 매번 실행된다.

pages

실제 애플리케이션의 페이지 구성을 포함하여 해당 디렉토리의 구조에 따라 router가 자동 생성된다.

* 해당 디렉토리는 이름을 변경할 수 없다.

plugins

애플리케이션에 바인딩될 외부 혹은 내부 plugins를 포함한다.

다시 말하면 루트 vue.js 애플리케이션이 생성되기 전 실행하고 싶은 자바스크립트 플러그인을 포함하는 디렉토리이다.

plugins는 애플리케이션이 인스턴스화 되기 전에 실행하며 전역적으로 구성 요소를 등록하고 함수 또는 상수를 삽입할 수 있다.

static

해당 디렉토리는 정적인 파일들을 포함한다. 구성에 따라서 html, javascript 파일도 포함시킬 수 있다.

이 디렉토리의 파일들은 /에 연결된다.

예) /static/robots.txt는 /robots.txt로 연결됨.

* 해당 디렉토리는 이름을 변경할 수 없다.

store

애플리케이션에서 사용될 vuex store파일들을 포함한다. 기본적으로 비활성화 상태이고 store 디렉토리에 index.js 파일을 작성하면 store가 활성화된다. 구성에 따라서 모듈 형태의 store를 형성할 수 있다.

* 해당 디렉토리는 이름을 변경할 수 없다.

nuxt.config.js

nuxt.js의 사용자 정의 설정을 포함하는 파일이다.

Nuxt.js 기본 설정된 기능을 이 파일을 통해서 덮어 쓸 수 있다.

따로 변경하지 않는다면 ~ 또는 @은 src 디렉토리를 가리킨다.

package.json

애플리케이션의 의존성과 스크립트를 포함하는 파일이다.

 

 

 

참고.

https://develop365.gitlab.io/nuxtjs-0.10.7-doc/ko/guide/directory-structure/