NuxtJS 시작하기

taese0ng·2021년 7월 31일
1

Nuxt

목록 보기
1/1
post-thumbnail

Nuxt.js 란?

Nuxt.js는 Vue.js가 공식으로 제공하는 프로젝트가 아닌 서드파티 프로젝트다.

루비 온 레일즈 같은 백 엔드가 필요 없으며 사전에 완성된 HTML 파일만 있으면 웹 사이트를 제공할 수 있다.

Vue.js를 기반으로 만들어졌으며 주로 SPA를 개발하는데 사용되는 프레임워크다.

Nuxt.js를 사용하면 서버 사이드 렌더링을 지원하는 유니버설(universal)한 Vue.js 애플리케이션을 만들 수 있다.

시작하기

설치하기

  • npm(5.2.0 이상)이 설치되어 있는 경우
$ npx create-nuxt-app <project-name>
$ cd <project-name>
$ npm run dev
  • yarn이 설치되어 있는 경우
$ yarn create nuxt-app <project-name>
$ cd <project-name>
$ yarn dev

구조

공통

  • .nuxt: 프로그램 수정 후, 생성되는 파일.
  • node_modules: 설치된 모듈들.
  • .editorconfig: 들여쓰기, 문.자셋등 정의
  • .eslintrc.js: eslint룰.
  • .gitignore: git으로 관리 안할 파일들.
  • package.json: 해당 프로젝트의 각종 실행, 설치된 모듈들이 정리된 파일.
  • nuxt.config.js: 해당 프로젝트의 핵심 설정파일.

백엔드

  • static: favicon같은 백엔드 서버가 정적으로 가지고 있을 파일들의 저장소.

프론트엔드

  • assets: 프론트에서 정적으로 가지고 있을 파일들의 저장소.
  • layout: 프론트의 모태가 될 최상단의 파일.
  • page: layout 밑에 라우팅되는 페이지.
  • components: page에서 import할 조각단위의 파일들.
  • middleware: 해당 페이지 라우트 전에 할 일들을 정의하는 파일들 (ex: 권한이 안되면 못들어가게하는 기능 등.)
  • plugin: 루트 페이지가 생성될때 실행할 플러그인들의 저장소
profile
FrontEnd Developer

0개의 댓글