Vue.js로 웹페이지 리빌드하기 - (3) Quasar 설치

퀘이사를 설치합니다.

 

Quasar는 몇가지 설치 방법을 지원하고 있습니다.

 

• UMD/독립형(스탠드얼론)
• 퀘이사 CLI
• 퀘이사 Vite 플러그인
• Vue CLI 플러그인

퀘이사에서는 자사 CLI인 퀘이사 CLI 사용을 강력하게 권장하고 있으며,

각각의 설치 방법에 의해서 어떤게 다른지를 아래에 설명하고 있습니다. 

 

https://quasar.dev/start/pick-quasar-flavour

Getting Started - Pick a Quasar Flavour | Quasar Framework

 

저는 기존 프로젝트가 Vue-CLI로 설치한 것이라, Vue CLI 플러그인을 사용하려고 했으나,

퀘이사 쪽이 호환성이라던가 추후에 유지보수 하기도 더 편한 거 같기도 했고.. 

기존 프로젝트라고 해도, 이제 막 시작한 터라 옮기는 것도 그리 어렵지 않아 퀘이사 CLI를 설치 한 후,

실행하는 방향으로 잡았습니다. 

 

 

먼저 npm install -g @quasar/cli 로,

어디에서든 쓸 수 있도록 글로벌 옵션을 적용해 퀘이사 CLI를 설치합니다.

 

그리고 프로젝트를 만들고자 하는 위치로 이동하여, 

 

quasar create 폴더명 으로 프로젝트를 생성합니다. 

여러 질문이 뜨는데, 잘 읽어보며 만들고자 하는 프로젝트에 해당하는 옵션을 지정합니다.

마지막 질문까지 다 지정을 했다면, 설치 과정에 들어가고

 

전부 설치가 끝났다고 나오며, 실행 가능한 상태가 됩니다.

 

그리고 cd 폴더명

quasar dev

를 순서대로 입력하여, 테스트 페이지를 실행 시킬 수 있습니다.

 

움직이기 시작하면 자동으로 웹 페이지가 뜹니다.

 

퀘이사 디폴트 페이지

 

제가 원했던건 다 만족하는 수준이었기에, 이대로 제 웹사이트를 작업하려고 합니다.

퀘이사의 기능을 하나하나 익혀가면서 해야하니.. 조금 귀찮을 거 같지만 재밌을 거 같네요.