Quasar

Quasar

• vue.js 기반 MIT 라이선스 오프 소스 프레임워크.
  다양한 유형의 반응형 웹 , 앱을 빠르게 만들 수 있음.
  • SPAs (싱글 페이지 앱)
  • SSR (서버 측 렌더링 앱) (+ 선택적 PWA 클라이언트 takeover)
  • PWAs (프로그레시브 웹 앱)
  • BEX (브라우저 확장)
  • 모바일 앱 (Android, iOS, …) Cordova 나 Capacitor를 통해
  • 다중 플랫폼 데스크톱앱 (Electron 사용)

 

 

장점

• 웹사이트와 앱에 최신 UI(머티리얼 가이드 라인 준수)를 바로 사용할 수 있음
• 데스크톱 및 모바일 브라우저(iOS Safari 포함!)에 대한 최상의 지원
• 각 빌드 모드(SPA, SSR, PWA, 모바일 앱, 데스크톱 앱 및 브라우저 확장)에 대한 동급 최상의 지원 및 자체 CLI와의 통합을 통한 최고의 개발자 경험
• 손쉽게 사용자 정의(CSS) 및 확장(JS) 가능
• 성능에 중점을 둔 프레임워크
• 자동 tree-shakable (불필요한 코드를 제거하는 기능)
• 포럼 및 디스코드 채팅의 커뮤니티
• 새로운 기능을 포함한 정기적인 릴리스
• 빠른 버그 수정 및 적극적인 커뮤니티 요청 수용
• 전체 개발 환경 처리(앱 아이콘 및 시작 화면 생성 포함)

 

 

 

 

 

 

vue의 main.js를 좀더 세분화 해서 아용하는 quasar.config.js 가 있다.

 

 

public 

 

 

favicon이 들어있습니다. 이는 조만간 적절한 것으로 교체하려고 합니다.

 

 

이하 src 폴더

assets

 

 

현재는 어디 쓸지 모르는 svg가 하나 있습니다.

 

boot

 

 

api 연결을 위한 axios와 국제화를 위한 i18n 설정파일

여기서 api 연결과 관련 처리를 하면 되겠죠.

 

components

 

 

화면의 컴포넌트 파일.

타입스크립트가 들어가서 그런지, 스크립트부가 꽤나 복잡하게 되어있네요.

models.ts 파일이 있는 이유도 타입스크립트 때문..

 

css

 

 

sass 옵션은 선택하지 않았기에 css가 있습니다.

글로벌 css 파일에 주석 한줄 달랑 있는데.. 아마 추가적인 css는 사용하지 않을 거 같아 이건 이대로 방치.

 

i18n

 

 

국제화 옵션에서, 자세한 설정을 넣는 부분

국제화를 어떻게 할지는 아직 정하지 않았지만, 한 일 영 3개 언어는 쓰지않을까 싶음. 

우선은 영어만 하고, 한국어와 일본어를 추후 추가하는 방향으로...

(병행해서 할 수 있다면 병행할 생각)

 

layouts

 

 

레이아웃용 뷰 파일.

여기에는 메인 레이아웃과 관리자페이지 레이아웃만 들어가지 않을까 싶음.

 

pages

 

 

메인 레이아웃의 메뉴, 상단바를 제외한 영역에 들어가는 메인페이지와 에러용 화면 파일이 있는 곳.

 

router

 

 

라우터 설정. 

어드민 페이지로 이동하는 라우터정도만 추가하지 않을까 싶은... 

 

store

 

 

vuex 설정용 스토어 폴더. example라고 되어있으나, 잘 만들어져있어서 이대로 쓸까 싶음.

 

other

 

 

 

 

 

공식문서

Quasar Framework

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

 

 

 

 

 

*참조https://ayasetaka.tistory.com/19