Quasar Framework setting 설치하기

Quasar Framework를 사용해서 Vue.js 에 관련하여 공부를 하려고 한다.

Quasar Framework 공식 사이트에 들어가보면 알겠지만 Vue.js 기반으로 보안, UI등 많은 기능들을 제공한다.

코드 작업 한번으로 여러가지 플렛폼에 한번에 적용된다. 그리고 무료다!

링크 : Quasar Framework

내가 설치한 개발환경이다.

Visual Studio Code : 개발 코딩 작업할 프로그램

설치 : code.visualstudio.com

아래 설명대로 진행하다가 안된다고 해서 확인했는데 설치가 덜되어서 문제가 생겼다.

이럴경에는 간단하게 https://nodejs.org/ko/ 이곳에 가서  node.js 를 설치해주면 된다.

1. Visual Studio Code에서 quasar 설치

Visual Studio Code 프로그램을 실행하고 스크린샷 순서대로 한다.

① : 클릭

② : quasar 입력

③ : 설치버튼 클릭

2. Visual Studio Code에서 npm 설치

Visual Studio Code 프로그램을 실행하고 스크린샷 순서대로 한다.

① : npm 검색

② : 설치버튼 클릭

이제 quasar 프로젝트를 만들어보자

Visual Studio Code 프로그램에 있는 터미널로 실행할수 있겠지만 

quasar 프로젝트를 만들고 실행해서 확인하고 싶었는데 오류가 났다. 

그래서 명령프롬프트창에서 다시 진행했다. 그리고 성공했다.

일단 D 드라이브로 이동해서 진행했다. 

먼저 설치된 quasar 이 잘못된거 같아 삭제 후 다시 설치했다. ( 명령어 : npm uninstall -g quasar-cli )

1. 명령어 : npm install -g @quasar/cli

2. quasar 설치가 완료되고

3. D드라이브에 b_quasar 폴더 이름으로 생성했다.

4. 명령어 : quasar create b_quasar

글씨가 깨졌는데...

입력하는게 나오는데 이중에 

Check the features needed for your project에서 선택하는게 나오는데 다 선택했다.

(스페이스바를 누르면 선택된다.)

다 입력하니 진행하는 화면이 보인다.

내가 입력한 내용은 모두 파랑색으로 보여지고 있으니 참고하면 될것 같다.

위에 내용이 끝나고 qusar 프로젝트를 만든 폴더로 이동을 하고

명령어 : quasar dev 를 입력했다. 아래 스크린샷 처럼 진행이 되고 나서

결과 화면

Quasar Framework는 Vue 기반이기 때문에 디버그 할 때는 

크롬 웹페이지에서 Vue 디버깅을 설치해서 크롬 브라우저로 보면 좋을 것 같다.

localhost:8080 을 복사해서 크롬으로 바로 열면 되니 참고한다.