NUXT 알아보기(1): 프로젝트 설정

NUXT가 뭘까요??? Vue.js를 통해 웹 개발을 할 때 사용하는 프레임워크입니다. 갑자기 회사에서 공부하래요... (앗 TMI)

NUXT로 프로젝트를 만들 때 boilerplate 코드를 통해 만들 수도 있지만, 나는 한땀한땀 만들 거다. 공부하는 거니까!!!!

먼저 프로젝트를 만들 폴더부터 만들어주자!!!! 나는 nuxt-tutorial이라는 폴더 아래 만들 것이다.

(참고로 툴은 자유롭게 쓰면 된다. 나는 webstorm을 사용한다. 사실 그냥 jetbrain 거 좋아한다. 너무 편해~~~

또한 package manager로는 yarn을 사용할 것이다.)

 

package.json 작성하기

먼저 package.json을 프로젝트 폴더 바로 아래에 작성해준다.(package.json 뭔지 모르겠으면 code-mania.tistory.com/22)

{
  "name": "nuxt-tutorial",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}

 

Nuxt 의존성 추가하기

그리고 터미널에 yarn add nuxt라고 입력해주자!!!!

그러면 오른쪽에는 yarn.lock이라는 파일과 node_modules라는 폴더가 생길 것이다. node_modules에는 nuxt와 nuxt에 필요한 package들이 들어있다.

좋았어!!!! 우리는 이제 설정을 끝냈다. 한땀한땀이라고 했지만 막상 할 것도 없다. 다음 시간에는 페이지를 만들어보자!!!!