nuxt를 배워보자

nuxt.js 공식 가이드에서 필요한 내용만 정리한 글입니다.

1. Nuxt.js starter 템플릿을 통해 빠르게 사용하기.

> npm install -g vue-cli    #vue-cli가 설치되지 않았다면, 해당 명령어로 설치해야한다.

> vue init nuxt-community/starter-template <project-name>

> cd <project-name>

> npm install

> npm dev

vue-cli 설치하지 않은 상태에서 vue init 실행하려 할 때, 아래와 같은 메시지가 나타난다.

Command vue init requires a global addon to be installed.

Please run yarn global add @vue/cli-init and try again.

개발모드[Development]

> npm run dev

배포모드[Production]

> npm run build

> npm start

정적 프로젝트 생성[Genterate]

> npm run generate

2. 디렉토리 구조

1) pages 디렉토리 - 애플리케이션의 뷰와 라우트 파일들이 존재

Nuxt.js는 pages 디렉토리 내의 모든 *.vue 파일을 애플리케이션의 라우트로 변환한다.

아마도.. about.vue 파일이면 about/index.html 로 변환한다는 소리같다.

2) assets 디렉토리 - LESS, SASS, Javascript 같은 컴파일되지 않은 파일들이 존재

3) components 디렉토리 - Vue 컴포넌트들의 존재 [ nuxt는 컴포넌트의 데이터, 메소드를 신경쓰지않는다. ]

4) Middleware 디렉토리 - 애플리케이션의 미들웨어를 포함하는 디렉토리.

미들웨어는 페이지/레이아웃이 렌더링 되기 전에 실행할 사용자 정의 함수를 정의할 수 있다.

5) plugins 디렉토리 - 루트 vue.js 애플리케이션이 생성되기 전 실행하고 싶은 자바스크립트 플러그인이 위치함.

6) static 디렉토리 - 정작파일, 모든 파일은 /에 연결된다.

* /static/robots.txt 은 /robots.txt 로 연결된다.

7) store 디렉토리 - vuex store 파일을 포함.