Nuxt3로 프로젝트 생성 시작

npx nuxi@latest init clone-green-cleaning 명령어로 nuxt 프로젝트를 생성해 주었습니다.

(참고로 New major version of npm availatve 8.18 -> 9.72는 npm update를 하라고 해서 업데이트를 해주었습니다.)

npx nuxi@latest init clone-green-cleaning

 

 

예전에 nuxt2를 생성했을 때 npx create-nuxt-app와는 명령어가 달라졌고 nuxt2 때는 기본 옵션들을 선택하는 것이 존재했는데 이번에는 그냥 별다른 옵션 선택 없이 설치가 완료 되어서 ??? 제가 놓친 것이 있나 생각했습니다.

nuxt3 docs get started 명령어	nuxt2 docs get started 명령어
nuxt3 guide get started 명령어	nuxt2 guide get started 명령어

 

아래는 설치가 완료된 디렉토리 구조인데 너무 오랜만이라 사실 nuxt2와 어떤 차이점이 생겼는지는 잘 모르겠지만 pages 폴더가 없어졌다는게 눈에 띄었습니다.

그래서 이유를 찾아보니 프로젝트에 따라 라우팅이 필요 없을 경우 pages 폴더를 생성하지 않으면 vue-router를 패키지에 포함시키지 않아서 용량을 낮출 수 있기 때문이라는 글을 보았습니다.

그리고 저는 페이지 및 컴포넌트를 정적으로 모두 만들고 시작할 예정이기 때문에 이번에 팀원 분과 style 작업을 위해 사용해보기로 한 Quarsa를 설치해주었습니다.

Nuxt docs 내 Quarsa 설치 명령어

저는 npm을 사용하기 때문에 아래명령어를 간단하게 알아보았습니다.

# Using npm
npm install quasar @quasar/extras
npm install --save-dev nuxt-quasar-ui

 

먼저

npm install quasar @quasar/extras는 Quasar Framework을 설치하는 명령어이고

npm install --save-dev nuxt-quasar-ui 는 Quasar UI를 설치하는 명령어로 보입니다.

 

Quasar UI는 Quasar Framework가 제공하는 UI 컴포넌트 모음을 의미합니다. 다시 말해 Quasar UI 컴포넌트는 Quasar Framework를 사용하는 애플리케이션에서 사용할 수 있는 재사용 가능한 UI 요소들입니다.

 

따라서 프로덕션 환경에서 필요없는 quasar-ui는 개발환경에만 설치되도록 --save-dev를 붙이는 것으로 보입니다.

 

 

Quasar 설치 완료 모습

그리고  최종적으로 nuxt.config.ts nuxt-quasar-ui 모듈을 추가해주는 작업을 해야한다.

위와 같이 nuxt.config.ts에 작성해주면 Quasar ui를 사용할 수 있다!

초기 환경 셋팅 끝? 이제 정적컴포넌트를 만들어봐야겠다.