Quasar Framework setting 설치하기
Quasar Framework를 사용해서 Vue.js 에 관련하여 공부를 하려고 한다.
Quasar Framework 공식 사이트에 들어가보면 알겠지만 Vue.js 기반으로 보안, UI등 많은 기능들을 제공한다.
코드 작업 한번으로 여러가지 플렛폼에 한번에 적용된다. 그리고 무료다!
링크 : Quasar Framework
내가 설치한 개발환경이다.
Visual Studio Code : 개발 코딩 작업할 프로그램
아래 설명대로 진행하다가 안된다고 해서 확인했는데 설치가 덜되어서 문제가 생겼다.
이럴경에는 간단하게 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 을 복사해서 크롬으로 바로 열면 되니 참고한다.