[Vue] 유용한 vue프레임워크 소개 (quasar)

개요

vue 를 개발 할때 일반적으로 vue-cli를 통해 프로젝트를 생성하고 개발하게됩니다.

근데 이렇게하면 개발자가 해야될 작업이 생각보다 많기 때문에

보통 생으로는 개발하지 않고 적당한 css 프레임워크나 vue 기반 프레임워크를 

덧붙여서 개발합니다.

(그 이유는 설정이나 배포 등 모든 면에서 더 편하기 때문)

 

quasar

저는 vue를 사용하여 개발을 처음 시작했을때는 vue-cli 로만 하다가.

vuetify를 알게 되었고 vuetify를 주로 썻습니다. 하지만 vuetify도 쓰다보면 뭔가 아쉬운

부분이 많았고. 그러던중 발견한 프레임워크가 quasar framework 입니다.

공식 웹사이트는 아래에 있습니다.

https://quasar.dev/

Quasar Framework - Build high-performance VueJS user interfaces in record time

 

퀘이사의 장점을 설명드리면 공식사이트에도 나와있지만

하나의 코드로 다양한 빌드모드를 지원하고 (매우 잘됨), 각종 설정도 매우 간편하게 가능합니다.

(웹, 데스크탑, 모바일, 등등...)

공식 웹사이트에서 보면 문서가 최신버전이 2.11.5 네요.

설치 및 실행

간단히 설치하고 실행해보겠습니다.

필요조건은 node 12+, vite 사용시 14+ 입니다.

npm i -g @quasar/cli

글로벌로 퀘이사cli 를 설치해줍니다.

퀘이사 프로젝트를 만들어 줍니다.

npm init quasar exam

이렇게 하면 아래와 같은 프로젝트 세팅할수 있는 콘솔이 뜹니다.

퀘이사 프로젝트 세팅

위의 화면이 뜨면 해당프로젝트에 사용할 다양한 환경을 선택해줍니다.

자바스크립트쓸건지, sass는 어떤 문법으로 쓸건지, vite 쓸건지 등등요.

퀘이사 프로젝트 세팅완료

하나하나 다 선택하면  자동으로 파일들을 생성하고 프로젝트 폴더를 생성해줍니다.

다 생성되고 난 후의 폴더구조는 아래와 같습니다.

퀘이사 프로젝트 구조

요기서 터미널에서 

quasar dev

를 입력하면 dev server 가 뜨게 되고 해당포트는 9000 번입니다.

퀘이사 데브서버 실행

퀘이사 설치와 샘플 프로젝트 생성, 실행 까지 해보았습니다.

 

저는 베타때부터 퀘이사를 사용하였고.

지금도 매우 잘 사용하고 있습니다.

이걸로 ssr도 해봤고, 일렉트론 빌드도 해봤도, 물론 웹도 잘 되었습니다.

해당 스택으로 개발한 프로덕션도 잘 돌아가고 있구요.

앞으로 퀘이사에 관한 팁도 자주 포스팅 하겠습니다.