[nuxt.js] NUXT(템플릿 설치는 vue-cli) 설치하기

NUXT를 설치하는 방법으로는 크게 3가지가 있다.

 

1. vue-cli 설치

2. npm(yarn) 설치

3. 수동설치

 

 

1. vue-cli 설치

vue-cli로 Nuxt start-template을 다운받아 설치한다.

vue-cli를 전역으로 설치(미설치 시에만)

npm install -g @vue/cli @vue/cli-init

starter-template 다운로드/ 설치

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

 

 프로젝트 실행하기

cd <project-name>
npm install #Or yarn

설치 완료 후 실행하기

npm run dev

웹브라우저 http://localhost:3000에서 정상적으로 화면을 확인할 수 있다.

 

 

2. npm/yarn으로 설치하기

npx create-nuxt-app <project-name>

#Or

yarn create nuxt-app <project-name>

서버 설정

NUXT는 프론트와 서버를 같이 작업할 수 있다.

서버 프레임워크로 어떤것을 사용할지 선택해야 함.(보통은 설치하지 않거나 express로 많이 사용함)

? Use a custom server framework (Use arrow keys)

  none
> express
  koa
  adonis
  hapi
  feathers
  micro

 

부가기능 설정

중복 선택이 가능하며, 부가기능의 대부분은 Plugin으로 설치된다.

? Choose feature to install

  Progressive Web App (PWA) Support
  Linter / Formatter
  Prettier
> Axios

• Progressive Web App (PWA) Support : 웹과 네이티브의 장점을 가지고 있는 PWA를 지원 할 지 선택
• Linter / Formatter : 코드 검사를 할지 선택
• Prettier : 코딩을 규격에 맞게 할지 선택
• Axios : http를 위한 라이브러리를 설치할지 선택

 

UI framework 설정

프로젝트의 스타일(css) 프레임워크를 선택한다.

? Use a custom UI framework

  none
  bootstrap
> vuetify
  bulma
  tailwind
  element-ui
  buefy

• none : 아무것도 사용하지 않음 
• bootstrap : 알만한 사람은 알고 있는 트위터에서 만든 bootstrap을 사용
• vuetify : 구글이 정의한 Material design을 Vue의 컴포넌트 형태로 제공(Vue프로젝트에서 가장 많이 사용하고 있음)
• bulma : bootstrap과 비슷하나 bootstrap과 달리 javascript를 사용하지 않고 Flexbox를 기반으로 구현한 프레임웍으로 최근 인기가 상승 추세임
• tailwind : 특징을 잘 모르겠음.
• element-ui : 중국에서 개발한 것으로 보이며 깃헙별은 많으나 한국인이 쓰기에는 부족한 점이 많아보임 
• buefy : vuetify가 Material design을 Vue의 컴포넌트 형태로 제공하는 것처럼 bulma를 Vue의 컴포넌트 형태로 제공함

 

검사도구 설정 (TEST)

프로젝트 단위 테스크 도구를 선택한다.

? Use a custom test framework (Use arrow keys)

> none
  jest
  ava

• none : 아무것도 사용하지 않음
• jest : 페이스북에 만든 테스트 프레임워크 
• ava : Mocha에서 AVA로 많이 전향한다고 하는데, 작고 빠르고 간단한 테스트 문법이 장점이라고함.

 

Single Page 설정

렌더링 시 일반적인 웹페이지 형태로 할지 싱글 페이지 형태로 할지 선택한다.

? Choose rendering mode (Use arrow keys)

> Universal
  Single Page App

• Universal : 기존의 웹사이트처럼 html 페이지가 여러 개 생성되는 형태로 렌더링 됨
• Single Page App : index 페이지 하나만 생성되고 javascript로 가상의 페이지를 보여주는 형태로 렌더링 됨

 

패키지 관리자 설정

nodejs로 설치되는 vue 패키지를 어떤 것으로 관리할 지 선택한다.

? Choose a package manager

> npm
  yarn

• npm : nodejs를 설치하면 기본적으로 자동 설치되는 npm(node package manager)
• yarn : npm과 동일한 기능을 하나 좀더 성능이 좋다고 함. npm으로 별도로 설치 해야함.

 

이렇게 설정이 완료되면 설치가 완료된다.

 

 

프로젝트 실행하기

cd <project-name>
npm run dev
#Or
yarn run dev

 

 

 

Production 버전 실행방법

Production 버전은 개발이 모두 완료되고 실제로 서비스를 할 때 실행시키는 명령어로 코드를 난독화 하고 쓸데없는 코드도 제거하는 등 최적화된 상태로 만들어서 웹서비스로 띄워준다.

Production 버전은 먼저 build로 파일을 생성한 다음 start로 서비스를 시작하는 방식으로 진행한다.

npm run build
npm start
#Or 
yarn run build
yarn start

 

테스트 버전 실행방법

작성한 코드가 원하는대로 잘 작동하는지 테스트해 볼 수 있다.

테스트 버전을 실행하면 앞서 선택한 jest 또는 ava가 실행된다.

npm run test
#Or
yarn run test

 

 

3. 수동으로 설치하기

수동으로 설치하는 방법은 NUXT 폴더와 파일의 구성요소를 직접 생성 및 작성하는 방법이다.

 

폴더 생성하기

프로젝트로 사용할 폴더를 만들고 생성한 폴더로 이동한다.

mkdir <project-name>
cd <project-name>

package.json 파일 생성하기

package.json 파일을 생성하고 내용을 작성한다.

(아래의 내용은 최소한의 세팅)

{
 "name": "my-app",
 "scripts": {
  "dev": "nuxt"
 }
}

* script는 나중에 npm 명령어로 사용할 예정

 

프로젝트에 NUXT 설치하기

npm install --save nuxt
#Or
yarn add nuxt

npm과 yarn은 패키지를 관리하는 프로그램으로 비슷한 역활을 하는데 근래에는 yarn을 많이 사용하는 추세입니다. 하지만 npm과 달리 yarn은 별도로 설치를 해줘야 합니다.

pages 폴더 생성하고 index.vue 파일 생성하기

mkdir pages

- pages/index.vue

<template>
 <h1>Hello world!</h1>
</template>

프로젝트 실행하기

npm run dev
# yarn 생략

pages 폴더 말고도 Assets, Components, Layouts, Middleware, Plugins, Static, Store 폴더가 있으나 필수사항은 아님.

설정을 도와주는 nuxt.config.js라는 파일도 있는데 이것 또한 필수사항은 아니지만 추후 자세히 알아보도록 할 예정!!