[VueJS] NuxtJS를 통해 VueJS 프로젝트 만들기 (feat. Typecript)

☞ NuxtJS를 이용해 VueJS 애플리케이션을 만들 수 있는 프로젝트 어떻게 생성할까? 

 

☞ 먼저 NuxtJS가 무엇인지 살펴보면, 

 

Nuxt는 현대 웹 애플리케이션을 만들기 위해 Vue.js를 기반으로 하는 진보적인 프레임워크입니다. Nuxt는 Vue.js의 공식 라이브러리(vue, vue-router 및 vuex)와 강력한 개발 도구(webpack, Babel and PostCSS)를 기반으로 합니다. Nuxt의 목표는 뛰어난 개발자 경험과 함께 강력하고 뛰어난 웹 개발을 가능하도록 하는 것입니다.

https://ko.nuxtjs.org/guide/

소개

 

 따라서 우리는 NuxtJS를 통해 더욱 더 편리하고, 효율적으로 VueJS 애플리케이션을 개발 할 수 있다.

 

그렇다면 만들어보자.

 

☞ 여기서 NuxtJS는 javascript를 기반으로 만들어진 프레임워크임을 알 수 있는데, NuxtJS는 또한 typescript도 지원하기 때문에 요새 트렌트에 맞게 typescript를 이용한 NuxtJS 프로젝트를 생성해보겠습니다.

 

※ 컴퓨터에 NodeJS가 설치되어있어야합니다.

아래 명령을 통해 NodeJS가 로컬에 설치되어있는지 확인 할 수 있습니다.

node --version

 

☞ 아래 명령을 통해 프로젝트를 생성해주자.

npx create-nuxt-app typescript-project

☞ 설치가 됨을 볼 수 있는데, 아래 영상처럼 프로젝트 세부 설정을 해줘야함을 볼 수 있습니다

이 설정들을 추후에 바꿀 수 있기 때문에, 당장에 꼭 필요한 설정들만 해주면 됩니다.

 

선택은 space bar 키를 통해, 선택 완료는 Enter키를 통해 동작시킬 수 있습니다. 

☞ VueJS를 typescript로 할 것이기 때문에 typescript를 선택함을 볼 수 있습니다.

☞ 설정이 끝나면 Successfully created project 라는 문구와 함께 project가 만들어졌음을 확인 하실 수 있습니다.

 

☞ 그 후 만들어준 폴더에 들어가 아래 명령어로 서버를 실행시켜줍니다.

npm run dev

서버를 실행시켜준 후 localhost:3000 에 들어가시면 

짜잔~ 이렇게 NuxtJS 프레임워크를 통해 만든 VueJS기반의 프로젝트를 생성했음을 확인하실 수 있습니다!