티스토리 뷰

SW 개발

Nuxt.js, Hello World 프로젝트 생성하기

지단로보트 2019. 7. 28. 04:17

개요

  • Nuxt.jsVue.js 기반의 프론트엔드 프레임워크이다. 상당히 많은 부분을 추상화, 자동화하여 개발자가 개발 자체에 집중할 수 있게 해주는 유용한 프레임워크이다.

Node.js, npm 사전 설치

  • 먼저 시스템에 Node.jsnpm을 설치해야 한다. 여기에서 다운로드 후 설치한다.
### Node.js 설치 확인
$ node -v
v10.16.0

### npm 설치 확인
$ npm -v
6.9.0

Nuxt.js 기본 프로젝트 생성

  • 아래와 같이 Nuxt.js 기본 프로젝트를 생성한다.
$ npm init nuxt-app hello-nuxt
Generating Nuxt.js project in hello-nuxt
? Project name: hello-nuxt
? Project description
? Author name
? Choose the package manager: Npm
? Choose UI framework: Element
? Choose custom server framework: None (Recommended)
? Choose Nuxt.js modules: Axios
? Choose linting tools: ESLint, Prettier
? Choose rendering mode: Single Page App
  • 생성을 완료하면 hello-nuxt라는 이름의 프로젝트 디렉토리가 생성된다.

프로젝트 실행

  • 생성된 프로젝트의 실행 방법은 아래와 같다.
### 프로젝트 디렉토리로 이동
$ cd hello-nuxt

### 개발 환경을 실행, http://localhost:3000 주소로 브라우저 접속이 가능
$ npm run dev

### 프러덕션 배포를 위한 빌드 실행
$ npm run build
$ npm run start

### Intellij IDEA 실행
$ idea64 .
  • npm run dev 명령을 실행하면 개발 환경이 실행되어 http://localhost:3000 주소로 리스닝을 시작한다. 프로젝트에 변경점이 발생할 경우 재시작할 필요 없이 자동으로 인지하며 오류 메시지 또한 상세하게 출력해준다.
  • /pages 디렉토리(또는 하위 디렉토리)에 .vue 파일을 작성할 때마다 Nuxt.js는 자동으로 vue-router 설정 파일을 생성해준다. 초기 시작 파일은 /pages/index.vue이다.
댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함