[ Spring Boot + Quasar ] 2. Quasar UI / component 가져다 쓰기

    1. [ Spring Boot + Quasar ] 1. 프로젝트 환경설정 
★ 2. [ Spring Boot + Quasar ] 2. Quasar UI / component 가져다 쓰기

0. 기본 화면 Flow 
      프로젝트폴더/src/index.template.html 
      url접속시 routes.js 설정 정보에 따라.  MainLayout.vue의  <router-view/>  태그에 해당하는 파일을 보여준다.

/ 접속시 pages/Index.vue ,    /login 접속시 pages/login.vue 파일을  MainLayout.vue의 <router-view/> 태그에 삽입

UI 는 https://quasar.dev/에서 원하는 UI를 가져다가 가공하여 사용하면 된다.

1. Layout 변경.
   1.1. https://quasar.dev/layout-builder 에 접속  원하는 Layout를 선택합니다.

이것저것 만져보자.

이것저것 바꾸고 원하는 UI 확인후 CONTINUE

또 이것저것 만져보고 CONTINUE

이것저것 만져보고 EXPORT LAYOUT 선택

소스를 복사한 후 

   1.2. 복사한 소스를  프로젝트폴더/src/layouts/MainLayout.vue  에 붙여넣고, 저장합니다.

바로 화면에 반영됩니다.

2. Quasar 에서 component 가져오기
     https://quasar.dev/vue-components/에서  원하는 컴포넌트 조회하고 ,  editor component 를 추가합니다.
     https://quasar.dev/vue-components/editor   

   2.1.  vue 파일을 추가합니다
         - 프로젝트명/src/pages/editor.vue

  2.2. https://quasar.dev/vue-components/editor  에서   '<>' 를 클릭하고 소스를 확인합니다.
        소스의  TEMPLAE / SCRIPT / STYLE 탭을 선택, 복사하여 editor.vue 에 붙여넣기 합니다.

복사하고 Editor.vue에 붙여넣기 합니다.

  2.3. routes.js 에  방금 생성한 editor.vue uri 정보를 등록합니다.

  2.4. 페이지확인

* 존재하지 않는 url로 접속해보자.    routes.js 의 children 에 선언되지 않은 경로는 Error404.vue로 이동한다.