Quasar Framework 시작하기

 

quasar.dev/introduction-to-quasar

Why Quasar? | Quasar Framework

홈페이지 번역

Why Quasar?

개발 비용을 대폭 절감하기 때문입니다. 

• Vue.js 기반이며, 웹 사이트 및 앱에 대한 최신 UI (Material Guidelines를 따름)를 즉시 사용할 수 있습니다.
• 데스크톱 및 모바일 브라우저 (iOS Safari 포함)를 즉시 지원합니다.
• 각 빌드 모드 (SPA, SSR, PWA, 모바일 앱, 데스크톱 앱 및 브라우저 확장)에 대한 동급 최고의 지원 및 자체 CLI와의 긴밀한 통합을 통한 최고의 개발자 경험을 할 수 있습니다.
• 쉽게 사용자 정의 가능 (CSS) 및 확장 가능 (JS) 합니다.
• 성능에 가장 중점을 둔 프레임 워크입니다.
• 자동으로 tree-shakable 을 할 수 있습니다.
• 포럼 및 Discord 채팅의 놀라운 커뮤니티에 참여할 수 있습니다.
• 새로운 기능을 포함한 정기적인 출시주기가 있습니다.
• 빠른 수정을 받고 커뮤니티의 요청에 귀를 기울입니다.
• 전체 개발 경험을 처리합니다 (앱 아이콘 및 스플래시 화면 만들기 포함).
• Quasar는 데스크톱 웹 사이트, 데스크톱 앱, 모바일 앱 또는 모든 것을 구축하는 경우에도 Vue를 기반으로 하는 최고의 솔루션입니다.

What is Quasar?

Quasar (/ˈkweɪ.zɑɹ/로 발음)는 MIT 라이선스 오픈 소스 Vue.js 기반 프레임 워크로, 웹 개발자는 다양한 종류의 반응 형 웹 사이트/ 앱을 빠르게 만들 수 있습니다.

• SPAs (Single Page App)
• SSR (Server-side Rendered App) (+ optional PWA client takeover)
• PWAs (Progressive Web App)
• BEX (Browser Extension)
• Mobile Apps (Android, iOS, …) through Cordova or Capacitor
• Multi-platform Desktop Apps (using Electron)

Quasar의 모토는 코드를 한 번 작성하고 동시에 웹 사이트, 모바일 앱 및 / 또는 Electron 앱으로 배포하는 것입니다. 예, 모두를위한 하나의 코드베이스로, 최첨단 CLI를 사용하여 기록적인 시간 내에 앱을 개발할 수 있도록 지원하고 모범 사례의 초고속 Quasar 웹 구성 요소를 지원합니다.

Quasar 를 사용할 때 Hammer.js, Moment.js 또는 Bootstrap 과 같은 추가 무거운 라이브러리가 필요하지 않습니다. 내부적으로 이러한 요구사항을 충족하고 작은 설치 공간으로 개발할 수 있습니다.

Getting started

www.youtube.com/watch?v=GV-D85D9KJQ&feature=youtu.be

위에 동영상을 참고했습니다.

Quasar를 사용하는 방법에는 세 가지가 있습니다. 가장 적합한 것을 선택하십시오.

 

• UMD/Standalone (embed into an existing project through CDN, progressive integration)
• Quasar CLI (the premium developer experience and highly recommended)
• Vue CLI 3 plugin

저는 두번째 방법으로 실습해보겠습니다.

필수사항으로 Node 버전 10 이상 그리고 NPM 버전 5 이상이 설치되었는지 확인해주세요. 노드의 고르지 않은 버전 (예 : 11, 13 등)을 사용하지 마세요. 이러한 버전은 Quasar에서 테스트되지 않았으며 실험적 특성으로 인해 문제를 일으키는 경우가 많습니다. 항상 LTS 버전의 Nodejs 를 사용하는 것이 좋습니다.

Node 설치 후에 Quasar CLI 를 설치해줍니다. 다음 명령어를 실행해 주세요.

$ npm install -g @quasar/cli

 

$ quasar create <folder_name>
$ quasar create test-quasar

 

<folder_name> 에 사용할 폴더이름을 넣고 quasar 프로젝트를 생성해봅니다.

 

found 0 vulnerabilities


 [*] Quasar Project initialization finished!

To get started:

  cd test-quasar
  quasar dev

Documentation can be found at: https://quasar.dev

Quasar is relying on donations to evolve. We'd be very grateful if you can
read our manifest on "Why donations are important": https://quasar.dev/why-donate
Donation campaign: https://donate.quasar.dev
Any amount is very welcomed.
If invoices are required, please first contact razvan@quasar.dev

Please give us a star on Github if you appreciate our work:
https://github.com/quasarframework/quasar

Enjoy! - Quasar Team

 

위와 같은 문구로 모두 설치가 되었으면 `cd test-quasar` 로 해당 폴더에서  `quasar dev` 를 해줍니다.

코드를 사용용도에 따라 고친 다음에 build 하는 방법을 알려드리겠습니다. 저는 linux 에서 배포를 해보겠습니다.

먼저 electron 모드로 실행해보겠습니다.

 

$ quasar dev -m electron

 

 

다음과 같이 화면이 팝업되는 걸 확인하고 빌드합니다.

 

$ quasar build -m electron

 

 

위와 같은 에러가 났을 시에는 quasar.confi.js 파일에 다음과 같이 추가해줍니다.

 

 

추가 후에 node_modules 삭제후, npm install 을 해주고 다시 build 를 명령합니다.

 

$ rm -rf node_modules
$ npm install
$ quasar build -m electron

 

 

다음과 같이 성공하면, test-quasar//dist/electron/Quasar App-linux-x64/Quasar App 에 실행파일이 생성됩니다.