Vue Nuxt 시작하기

Vue.js Application을 쉽게 생성하고 만들 수 있는 프레임 워크인 Nuxt.js

Nuxt.js를 시작해보자!

 

Nuxt.js 공식 사이트

Nuxt Lifecycle

Nuxt.js 설치

Terminal에서 진행한다

 

npx

$ npx create-nuxt-app <project-name>

yarn

$ yarn create nuxt-app <project-name>

npm

$ npm init nuxt-app <project-name>

 

명령어 실행 후에는 여러 질문이 나오는데, 원하는 환경에 맞게 선택하면 된다.

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .

1. 프로젝트 네임 지정.
? Project name <project-name>

2. 프로젝트 설명
? Project description <My perfect Nuxt.js project>

3. 프로젝트 생성자
? Author name <violajang>

4. 어떤 언어로 프로그래밍 할 것인가?
? Choose programming language <JavaScript>
> JavaScript
  TypeScript

5. Package Manager는 무엇을 쓸것인가?
? Choose the package manager <Npm>
  Yarn
> Npm

6. UI framework를 사용할 것인가? 사용한다면 어떤것을 사용할것인가?
? Choose UI framework <None>
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js

7. server framework를 사용할 것인가? 사용한다면 어떤것을 사용할것인가?
? Choose custom server framework <None (Recommended)>
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

8. Nuxt.js Module을 사용할 것인가? (axios를 사용하기 때문에 space 키를 눌러 설정해주었다.) 
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Axios
 ( ) Progressive Web App (PWA) Support
 ( ) DotEnv       

9. linting tools를 사용할 것인가? (ESLint를 사용하기 때문에 space 키를 눌러 설정해주었다.)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) ESLint
( ) Prettier
( ) Lint staged files
( ) StyleLint    

10. test framework를 사용할 것인가? 사용한다면 어떤것을 사용할것인가?
? Choose test framework <None>
> None
  Jest
  AVA

11. 렌더링 모드를 선택해라. 
? Choose rendering mode <Single Page App>
  Universal (SSR)
> Single Page App

Nuxt.js 실행

npm

$ npm run dev

yarn

$ yarn dev

터미널에 나타난 http://localhost:3000/ 에 ctrl+click 하면 nuxt가  빌드된 로컬호스트가 열린다. 

nuxt 로고와 함께 페이지가 나타나면 성공!

 

dev외의 다른 명령어도 알아보자

dev	개발 서버를 Hot-reloading 상태로 localhost:3000으로 실행된다.
build	Webpack을 통해 애플리케이션을 빌드한다.
start	프로덕션(nuxt 배포)모드로 서버를 시작한다.(build 실행 후 진행된다.)
generate	애플리케이션을 빌드하고 모든 라우트를 HTML 파일로 생성한다.(정적 호스팅)

 

Nuxt.js 디렉토리 구조

Nuxt에서 기본으로 셋팅해주는 디렉토리 구조를 파악해 보자.

 

assets

css, image, font와 같은 리소스들을 포함한다.

 

components

애플리케이션에서 사용될 컴포넌트들을 포함하며 해당 경로에 위치된 컴포넌트들은 Nuxt.js의 비동기 데이터 함수인 asyncData또는 fetch를 사용할 수 없다.

 

content

content는 @nuxt/content 모듈을 사용하여 애플리케이션을 확장할 수 있다. Markdown, JSON, YAML, XML, CSV와 같은 파일을 가져오고 관리할 수 있다. nuxt/contents에서 더 많은 정보를 확인해보자.

 

layouts

애플리케이션 전체에 대한 레이아웃을 포함한다. 기본으로 default.vue가 생성되어 있을 것이고 상황에 맞게 layout을 생성할 수 있다. 해당 디렉토리는 이름을 변경할 수 없다.

 

middleware

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

 

module

Nuxt Module은 Nuxt 프레임워크의 핵심 기능을 확장하고 통합 및 추가할 수 있다. 사용자가 직접 모듈을 작성할 수 있으며 Nuxt 커뮤니티에 이미 많은 모듈이 공개되어있다.

 

pages

실제 애플리케이션의 페이지 구성을 포함하며 해당 디렉토리의 구조에 따라 router가 자동으로 생성된다. 해당 디렉토리는 이름을 변경할 수 없다.

 

plugins

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

 

static

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

 

store

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