Quasar UI 추가해서 사용해보기

quasar  설치를 했으면 이제 실행을 해봐야 한다.

vusial studio code를 처음 사용하는 사람들을 위해서 

quasar로 프로젝트를 만드는 방법 부터 설명한다.

 

이후에는 페이지를 추가하고 UI 컨트롤을 추가해보자

 

1. visual studio code 프로그램을 실행후 quasar 프로젝트를 만든다.

터미널 > 새 터미널 클릭하면 아래 터미널에서 명령어를 입력 할 수 있는데 

글씨가 아무것도 안나온다면 엔터키 한번 눌러주면 나온다.

 

명령어 : quasar create ui_quasar    ( quasar create 만들폴더명  )

 

 

 

2. 아래 화면에서 입력하고 선택하는 화면이 나오는데 모르면 엔터키를 눌러서 넘긴다.

엔터키 막 누르지 말고... 아래 화면에서 프로젝트에 필요한 내용을 선택하는데 나오는데 

방향키 아래 버튼을 눌러가면서 스페이스바 키를 눌러 선택한다. 아래 스샷을 보고 설정한다.

 

 

 

3. 설치가 다 끝나면 visual studio code 프로그램을 종료한다. (프로젝트를 여는 방법을 알려드릴려고 함)

 

이렇게 해서 프로젝트를 열었다면 이후에는 마우스 오른쪽 눌러서 폴더 바로 열수 있으니 참고 한다.

 

 

4. 폴더를 열어 보면 아래와 같이 되어 있다.

1. quasar 프로젝트 구성화면이고, 2. 에서는 quasar 프로젝트를 실행 명령어 이다.

실행명령어 : quasar dev

 

 

실행화면

 

 

이 상태에서 새 페이지를 추가하고 quasar 공식 사이트에 있는 UI를 추가해보자.

아래 순서대로 진행한다.

 

1. pages에서 마우스 오른쪽을 눌러 새파일 추가를 하고 이름을 Login.vue 로 한다.

2. 페이지를 추가하면 안에 코딩을 해줘야 하는데 기본적인 코드 내용이다.

<template>
  <q-page>
    안녕하세요. 반갑습니다. GODFFS 입니다.
  </q-page>
</template>
<style>
</style>
<script>
</script>

 

4. 모두 작성했으면 Ctrl + S키를 눌러서 저장을 하고 url 주소를 입력해 확인한다.

http://localhost:8080/#/Login

 

 

 

이제 quasar 공식사이트에 들어가 맘에 드는 컨트롤을 찾는다.

http://quasar.dev 에서 검색한다.

 

나는 card 를 검색해서 추가했다.

공식사이트에 있는 컨트롤들을 사용하려면 프로젝트에 추가를 해줘야 하는데

방법은 아래 스샷내용을 보고 참고한다.

 

 

공식 사이트에 보면 QUASAR CLI 에 보면

components안에 있는 코드를 프로젝트에 포함시켜줘야 한다.

 

프로젝트에서 quasar.conf.js 파일을 열어 내용을 추가한다.

 

 

 

추가를 하고 공식사이트 화면 아래로 좀더 내려보면 UI들이보인다.

여기서 <> 버튼을 누르면 해당 UI에 대한 코드를 볼 수 가 있다.

 

 

TEMPLATE 탭을 누르면 코드가 보이는데

template 태그 안에 있는 내용을 모두 복사해서 위에서 추가한 Login.vue 페이지에서 template 안에 코드를 붙여 넣는다.

 

 

다음 SCRIPT 탭을 눌러 내용을 복사해서 붙여넣는다.

 

다음은 STYLE 탭을 눌러 다시 추가한다.

 

 

Ctrl + S키를 눌러 저장하고 http://localhost:8080/#/Login 웹페이지를 확인한다.

확인을 했더니 오류가 난다...;;

 

Newline required at end of file but not found.....

맨 마지막 줄이 없어서 애러가 난것이다. 엔터키 눌러서 한줄 내리면 된다.

 

이렇게...

 

 

 

저장후 확인한다.

 

 

어때요? 참 쉽죠~?

 

끝~