Nuxt.js의 폴더구조와 자동라우팅

 

시작하기 앞서

본글은 '캡틴 판교'님의 'Nuxt.js 시작하기' 수강 이후 복습을 위해 적은 글이며 

캡틴 판교님이 만드신 블로그와 유사한 혹은 가깝게 동일함을 미리 말씀드립니다.

출처 : https://joshua1988.github.io/vue-camp/nuxt/intro.html#nuxt%E1%84%8B%E1%85%B4-%E1%84%8C%E1%85%A1%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%B7

Introduction | Cracking Vue.js

인프런 url : https://www.inflearn.com/course/%EB%84%89%EC%8A%A4%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0/dashboard

Nuxt.js 시작하기 - 인프런 | 강의

 

#저작권 등에 문제가 생길 시 삭제하겠습니다.

 

Nuxt 자동 라우팅

vue에서는 vue-router라는 게 있는데 이게 페이지를 이동할 수 있게 설정하는 건데 nuxt에서는 무려 이게 자동으로 된다.

(참고로 로컬이 켜져있어야 함 실습하다 안 켜져 있어서 왜 자동으로 안되지 하는 그런 사태가... ㅋㅋㅋ)

이 엄청 간편한 게...

vue-router와 다르게 nuxt에 라우터 파일은. nuxt > router.js이다.

 

 

 

실습하며 생긴 라우터 파일 내부는 대충 이런 식인데 실제로 프로젝트를 진행하게 되면 파일 내부가 조금 변하겠지만

개인적으로 작은 실습 혹은 연습용 도로 쓰는 nuxt에서는 이러한 라우터 파일을 건드리지 않아도 될 거 같다.

(물론 직장인인 나는 해당사항 없어요...)

*** 한 가지 팁!
***

<router-view>, <Nuxt> 모두 뷰 컴포넌트입니다. 따라서 <RouterView>와 <router-view>와 같습니다. <Nuxt>도 그럼 동일한 케밥 네이밍으로 변환하면 <nuxt>로도 쓸 수 있겠죠? 😃

 

Nuxt의 폴더구조

 

내가 nuxt 수업 들으면서 캡쳐한 폴더구조

 

참고로 nuxt버전마다 폴더구조가 약간씩 다르다 저기서 인프런을 들으면서 추가한 것도 있는데 기억이 안나는 관계로

버전마다 폴더구조가 달라도 그 폴더가 어떤 역할을 하는지만 알고 있으면 나중에 폴더 추가하면 되니...

 

 

**** 참고로 backend는 원래 없는 폴더이고 api연동을 위해 수업에 포함되는 깃 헙에서 가지고 온 것

• . nuxt: 넥스트 빌드 결과물 폴더
• assets : 스타일 시트, 이미지, 폰트 등 웹 리소스 폴더입니다.
• components : 뷰 컴포넌트 폴더입니다.
• layouts : 레이아웃 컴포넌트 폴더입니다.
  레이아웃 컴포넌트란 페이지의 레이아웃을 잡아주는 역할을 하는 컴포넌트
  
  
• middleware : 미들웨어(페이지를 화면에 표시하기 전에 실행할 수 있는 함수) 파일 폴더입니다. 
  Nuxt에서 미들웨어(Middleware)는 페이지나 레이아웃이 렌더링 되기 전에 호출되는 커스텀 훅(Hook)입니다.
  
• pages : 특정 URL에 접근했을 때 표시될 페이지 컴포넌트 폴더입니다..
• plugins : 뷰 플러그인 폴더입니다. 
• static : 빌드했을 때 서버의 루트에 존재해야 하는 파일들의 폴더입니다. 파비콘이나 robots.txt 등의 파일이 위치합니다.
• store : 뷰 엑스 폴더입니다.